feat: add drag demo

xrkffgg · Jun 3, 2020 · fbccc2e · fbccc2e
1 parent 5321f74
commit fbccc2e
Show file tree

Hide file tree

Showing 6 changed files with 319 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "vue": "^2.6.10",
     "vue-baidu-map": "^0.21.20",
     "vue-codemirror": "^4.0.6",
+    "vue-drag-resize": "^1.3.2",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1",
     "xlsx": "^0.15.6"

diff --git a/src/assets/scss/csshake.css b/src/assets/scss/csshake.css
@@ -0,0 +1,157 @@
+.shake { display: inline-block; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; }
+.shake:hover { -webkit-animation-name: shake-base; -ms-animation-name: shake-base; animation-name: shake-base; -webkit-animation-duration: 5s; -ms-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
+.shake.shake-constant { -webkit-animation-name: shake-base; -ms-animation-name: shake-base; animation-name: shake-base; -webkit-animation-duration: 5s; -ms-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
+.shake.shake-constant.hover-stop:hover { -webkit-animation-play-state: paused; -ms-animation-play-state: paused; animation-play-state: paused; }
+
+@-webkit-keyframes shake-base { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
+  2% { -webkit-transform: translate(-0.5px, 1.5px) rotate(0.5deg); }
+  4% { -webkit-transform: translate(-0.5px, 1.5px) rotate(-0.5deg); }
+  6% { -webkit-transform: translate(-2.5px, -1.5px) rotate(0.5deg); }
+  8% { -webkit-transform: translate(-2.5px, -2.5px) rotate(-1.5deg); }
+  10% { -webkit-transform: translate(1.5px, 1.5px) rotate(-1.5deg); }
+  12% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-0.5deg); }
+  14% { -webkit-transform: translate(1.5px, -2.5px) rotate(-0.5deg); }
+  16% { -webkit-transform: translate(0.5px, 1.5px) rotate(0.5deg); }
+  18% { -webkit-transform: translate(-2.5px, -0.5px) rotate(0.5deg); }
+  20% { -webkit-transform: translate(-0.5px, -0.5px) rotate(-1.5deg); }
+  22% { -webkit-transform: translate(-2.5px, -1.5px) rotate(-1.5deg); }
+  24% { -webkit-transform: translate(-1.5px, -2.5px) rotate(-1.5deg); }
+  26% { -webkit-transform: translate(0.5px, -0.5px) rotate(-1.5deg); }
+  28% { -webkit-transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
+  30% { -webkit-transform: translate(-2.5px, 1.5px) rotate(0.5deg); }
+  32% { -webkit-transform: translate(-2.5px, -2.5px) rotate(-0.5deg); }
+  34% { -webkit-transform: translate(-1.5px, 0.5px) rotate(-1.5deg); }
+  36% { -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg); }
+  38% { -webkit-transform: translate(0.5px, -0.5px) rotate(-0.5deg); }
+  40% { -webkit-transform: translate(-0.5px, 0.5px) rotate(0.5deg); }
+  42% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
+  44% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
+  46% { -webkit-transform: translate(-1.5px, 1.5px) rotate(-1.5deg); }
+  48% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
+  50% { -webkit-transform: translate(-1.5px, -0.5px) rotate(-1.5deg); }
+  52% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-1.5deg); }
+  54% { -webkit-transform: translate(1.5px, 0.5px) rotate(-1.5deg); }
+  56% { -webkit-transform: translate(0.5px, 0.5px) rotate(-1.5deg); }
+  58% { -webkit-transform: translate(0.5px, 1.5px) rotate(-0.5deg); }
+  60% { -webkit-transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
+  62% { -webkit-transform: translate(-2.5px, -1.5px) rotate(-0.5deg); }
+  64% { -webkit-transform: translate(-1.5px, 0.5px) rotate(0.5deg); }
+  66% { -webkit-transform: translate(0.5px, -0.5px) rotate(-1.5deg); }
+  68% { -webkit-transform: translate(-1.5px, -0.5px) rotate(-1.5deg); }
+  70% { -webkit-transform: translate(-0.5px, -2.5px) rotate(-1.5deg); }
+  72% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-1.5deg); }
+  74% { -webkit-transform: translate(-2.5px, 0.5px) rotate(0.5deg); }
+  76% { -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg); }
+  78% { -webkit-transform: translate(1.5px, -2.5px) rotate(0.5deg); }
+  80% { -webkit-transform: translate(-2.5px, -2.5px) rotate(-0.5deg); }
+  82% { -webkit-transform: translate(-2.5px, -1.5px) rotate(0.5deg); }
+  84% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
+  86% { -webkit-transform: translate(-2.5px, 0.5px) rotate(-0.5deg); }
+  88% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-0.5deg); }
+  90% { -webkit-transform: translate(-1.5px, -1.5px) rotate(-1.5deg); }
+  92% { -webkit-transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
+  94% { -webkit-transform: translate(0.5px, -0.5px) rotate(-0.5deg); }
+  96% { -webkit-transform: translate(-2.5px, -2.5px) rotate(0.5deg); }
+  98% { -webkit-transform: translate(-0.5px, 1.5px) rotate(-0.5deg); } }
+
+@-ms-keyframes shake-base { 0% { -ms-transform: translate(0px, 0px) rotate(0deg); }
+  2% { -ms-transform: translate(-0.5px, -0.5px) rotate(-1.5deg); }
+  4% { -ms-transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
+  6% { -ms-transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
+  8% { -ms-transform: translate(-2.5px, -0.5px) rotate(-0.5deg); }
+  10% { -ms-transform: translate(1.5px, -2.5px) rotate(-1.5deg); }
+  12% { -ms-transform: translate(0.5px, 0.5px) rotate(-0.5deg); }
+  14% { -ms-transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
+  16% { -ms-transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
+  18% { -ms-transform: translate(1.5px, -0.5px) rotate(-1.5deg); }
+  20% { -ms-transform: translate(-1.5px, -2.5px) rotate(-0.5deg); }
+  22% { -ms-transform: translate(-0.5px, -0.5px) rotate(-0.5deg); }
+  24% { -ms-transform: translate(1.5px, -0.5px) rotate(-0.5deg); }
+  26% { -ms-transform: translate(-1.5px, -2.5px) rotate(0.5deg); }
+  28% { -ms-transform: translate(1.5px, 1.5px) rotate(-1.5deg); }
+  30% { -ms-transform: translate(-2.5px, -1.5px) rotate(-1.5deg); }
+  32% { -ms-transform: translate(-0.5px, -0.5px) rotate(-1.5deg); }
+  34% { -ms-transform: translate(1.5px, 1.5px) rotate(-1.5deg); }
+  36% { -ms-transform: translate(-0.5px, -0.5px) rotate(0.5deg); }
+  38% { -ms-transform: translate(1.5px, -1.5px) rotate(-0.5deg); }
+  40% { -ms-transform: translate(1.5px, -1.5px) rotate(0.5deg); }
+  42% { -ms-transform: translate(-1.5px, 1.5px) rotate(-0.5deg); }
+  44% { -ms-transform: translate(0.5px, 1.5px) rotate(-0.5deg); }
+  46% { -ms-transform: translate(1.5px, 0.5px) rotate(0.5deg); }
+  48% { -ms-transform: translate(-2.5px, 0.5px) rotate(0.5deg); }
+  50% { -ms-transform: translate(1.5px, 1.5px) rotate(-0.5deg); }
+  52% { -ms-transform: translate(-2.5px, -0.5px) rotate(0.5deg); }
+  54% { -ms-transform: translate(-2.5px, -1.5px) rotate(-1.5deg); }
+  56% { -ms-transform: translate(0.5px, -1.5px) rotate(0.5deg); }
+  58% { -ms-transform: translate(0.5px, 0.5px) rotate(-0.5deg); }
+  60% { -ms-transform: translate(-0.5px, 1.5px) rotate(0.5deg); }
+  62% { -ms-transform: translate(-2.5px, -0.5px) rotate(0.5deg); }
+  64% { -ms-transform: translate(0.5px, -0.5px) rotate(-0.5deg); }
+  66% { -ms-transform: translate(0.5px, 0.5px) rotate(-0.5deg); }
+  68% { -ms-transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
+  70% { -ms-transform: translate(-1.5px, 1.5px) rotate(-1.5deg); }
+  72% { -ms-transform: translate(0.5px, -2.5px) rotate(-1.5deg); }
+  74% { -ms-transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
+  76% { -ms-transform: translate(-1.5px, 0.5px) rotate(0.5deg); }
+  78% { -ms-transform: translate(-2.5px, 0.5px) rotate(-0.5deg); }
+  80% { -ms-transform: translate(0.5px, 0.5px) rotate(-1.5deg); }
+  82% { -ms-transform: translate(-2.5px, -1.5px) rotate(-1.5deg); }
+  84% { -ms-transform: translate(-0.5px, -0.5px) rotate(-1.5deg); }
+  86% { -ms-transform: translate(-0.5px, 0.5px) rotate(-1.5deg); }
+  88% { -ms-transform: translate(0.5px, -1.5px) rotate(0.5deg); }
+  90% { -ms-transform: translate(-2.5px, 0.5px) rotate(-0.5deg); }
+  92% { -ms-transform: translate(-2.5px, -0.5px) rotate(0.5deg); }
+  94% { -ms-transform: translate(-1.5px, -1.5px) rotate(-1.5deg); }
+  96% { -ms-transform: translate(1.5px, 1.5px) rotate(0.5deg); }
+  98% { -ms-transform: translate(-2.5px, -0.5px) rotate(0.5deg); } }
+
+@keyframes shake-base { 0% { transform: translate(0px, 0px) rotate(0deg); }
+  2% { transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
+  4% { transform: translate(-2.5px, -1.5px) rotate(0.5deg); }
+  6% { transform: translate(1.5px, 1.5px) rotate(-1.5deg); }
+  8% { transform: translate(-1.5px, -2.5px) rotate(0.5deg); }
+  10% { transform: translate(1.5px, 1.5px) rotate(-0.5deg); }
+  12% { transform: translate(-1.5px, 1.5px) rotate(-1.5deg); }
+  14% { transform: translate(-1.5px, 0.5px) rotate(0.5deg); }
+  16% { transform: translate(0.5px, 0.5px) rotate(-0.5deg); }
+  18% { transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
+  20% { transform: translate(-2.5px, 0.5px) rotate(-1.5deg); }
+  22% { transform: translate(1.5px, 0.5px) rotate(-0.5deg); }
+  24% { transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
+  26% { transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
+  28% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
+  30% { transform: translate(-2.5px, 0.5px) rotate(0.5deg); }
+  32% { transform: translate(1.5px, -0.5px) rotate(-0.5deg); }
+  34% { transform: translate(0.5px, -2.5px) rotate(-1.5deg); }
+  36% { transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
+  38% { transform: translate(-2.5px, -0.5px) rotate(0.5deg); }
+  40% { transform: translate(-0.5px, 1.5px) rotate(0.5deg); }
+  42% { transform: translate(1.5px, 1.5px) rotate(-0.5deg); }
+  44% { transform: translate(-2.5px, -2.5px) rotate(0.5deg); }
+  46% { transform: translate(0.5px, -2.5px) rotate(0.5deg); }
+  48% { transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
+  50% { transform: translate(-0.5px, 0.5px) rotate(0.5deg); }
+  52% { transform: translate(1.5px, 0.5px) rotate(0.5deg); }
+  54% { transform: translate(-2.5px, 0.5px) rotate(-1.5deg); }
+  56% { transform: translate(-2.5px, 1.5px) rotate(0.5deg); }
+  58% { transform: translate(-2.5px, -2.5px) rotate(-0.5deg); }
+  60% { transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
+  62% { transform: translate(-1.5px, 0.5px) rotate(-0.5deg); }
+  64% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
+  66% { transform: translate(-2.5px, 0.5px) rotate(-0.5deg); }
+  68% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
+  70% { transform: translate(0.5px, 1.5px) rotate(0.5deg); }
+  72% { transform: translate(-2.5px, 1.5px) rotate(0.5deg); }
+  74% { transform: translate(1.5px, -0.5px) rotate(0.5deg); }
+  76% { transform: translate(-0.5px, -1.5px) rotate(0.5deg); }
+  78% { transform: translate(-0.5px, -2.5px) rotate(0.5deg); }
+  80% { transform: translate(1.5px, -0.5px) rotate(0.5deg); }
+  82% { transform: translate(-1.5px, 0.5px) rotate(-0.5deg); }
+  84% { transform: translate(-1.5px, -1.5px) rotate(-0.5deg); }
+  86% { transform: translate(0.5px, -0.5px) rotate(-1.5deg); }
+  88% { transform: translate(-2.5px, -2.5px) rotate(-1.5deg); }
+  90% { transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
+  92% { transform: translate(-1.5px, 0.5px) rotate(0.5deg); }
+  94% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
+  96% { transform: translate(1.5px, 0.5px) rotate(-0.5deg); }
+  98% { transform: translate(-0.5px, -1.5px) rotate(0.5deg); } }
diff --git a/src/assets/scss/init.scss b/src/assets/scss/init.scss
@@ -57,6 +57,9 @@ input[type="number"]{
 // common
 @import './common.scss';
 
+// shake
+@import './csshake.css';
+
 *::after{
   clear: both;
 }
diff --git a/src/components/jsCom/003.vue b/src/components/jsCom/003.vue
@@ -3,7 +3,9 @@
     <div class="main-title">Excel Demo</div>
     <div class="main-title-time num">2020-04-03</div>
     <div class="main-title-tip">
-      应好多小伙伴的要求，先增加一个小 Demo。该 Demo 仅用于展示功能，略粗糙，若有 Bug，请谅解，也可在 https://github.com/xrkffgg/Kvue/issues 提出来。可点击下载 Demo Excel，若因网络问题，可在目录 src/assets/excel 中查看。导出的 Excel 会自动下载到浏览器默认的下载地址中。引入 2 个 JS 文件，最新的查看 https://github.com/xrkffgg/Ktools/tree/master/JS/002.Excel
+      应好多小伙伴的要求，先增加一个小 Demo。该 Demo 仅用于展示功能，略粗糙，若有 Bug，请谅解，也可在 
+      <a target="_blank" href="https://github.com/xrkffgg/Kvue/issues">https://github.com/xrkffgg/Kvue/issues</a> 提出来。可点击下载 Demo Excel，若因网络问题，可在目录 src/assets/excel 中查看。导出的 Excel 会自动下载到浏览器默认的下载地址中。引入 2 个 JS 文件，最新的查看 
+      <a target="_blank" href="https://github.com/xrkffgg/Ktools/tree/master/JS/002.Excel">https://github.com/xrkffgg/Ktools/tree/master/JS/002.Excel</a>
     </div>
     <div class="main-content">
       <div style="display: flex; width: 340px; justify-content: space-between;">

diff --git a/src/components/jsCom/004.vue b/src/components/jsCom/004.vue
@@ -0,0 +1,148 @@
+
+<template>
+  <div id="js004">
+    <div class="main-title">Drag rezise Demo</div>
+    <div class="main-title-time num">2020-06-03</div>
+    <div class="main-title-tip">
+      项目中引用的 csshake 为简版，完整版请查看 <a target="_blank" href="https://github.com/xrkffgg/Ktools/blob/master/CSS/csshake.css">https://github.com/xrkffgg/Ktools/blob/master/CSS/csshake.css</a>
+    </div>
+    <div class="main-content" >
+      <el-button
+        type="primary"
+        style="width: 200px;"
+        @click="isDraggable = !isDraggable">
+        {{ !isDraggable ? '开 启' : '关 闭' }}
+      </el-button>
+      <div class="xyshow">
+        x:{{x}} y:{{y}}
+      </div>
+
+      <div :class="isDraggable ? 'isdrag': ''">
+        <VueDragResize
+          :x="btn.x1"
+          :y="btn.y1"
+          :isResizable="false"
+          :isDraggable="isDraggable"
+          @dragging="resize">
+          <div :class="isDraggable ? 'shake shake-constant hover-stop' : ''">
+            <el-button>春天的风</el-button>
+          </div>
+        </VueDragResize>
+
+        <VueDragResize 
+          :x="btn.x2"
+          :y="btn.y2"
+          :isResizable="false"
+          :isDraggable="isDraggable"
+          @dragging="resize">
+          <div :class="isDraggable ? 'shake shake-constant hover-stop' : ''">
+            <el-button>夏天的雨</el-button>
+          </div>
+        </VueDragResize>
+
+        <VueDragResize 
+          :w="160"
+          :h="50"
+          :x="btn.x3"
+          :y="btn.y3"
+          :isResizable="false"
+          :isDraggable="isDraggable"
+          @dragging="resize">
+          <div :class="isDraggable ? 'shake shake-constant hover-stop' : ''">
+            <el-button>秋天的月</el-button>
+          </div>
+        </VueDragResize>
+
+        <VueDragResize 
+          :w="160"
+          :h="50"
+          :x="btn.x4"
+          :y="btn.y4"
+          :isResizable="false"
+          :isDraggable="isDraggable"
+          @dragging="resize">
+          <div :class="isDraggable ? 'shake shake-constant hover-stop' : ''">
+            <el-button>冬天的雪</el-button>
+          </div>
+        </VueDragResize>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import VueDragResize from 'vue-drag-resize';
+
+  export default {
+    name : 'js001',
+    mixins : [],
+    components: {
+      VueDragResize
+    },
+
+    props:[
+
+    ],
+
+    created(){
+
+    },
+
+    watch:{
+
+    },  
+
+    mounted(){
+
+    },
+
+    data() {
+      return {
+        //页面展示数据
+        btn: {
+          x1: 300,
+          y1: 300,
+          x2: 350,
+          y2: 350,
+          x3: 400,
+          y3: 400,
+          x4: 450,
+          y4: 450,
+        },
+        //页面使用数据
+        isDraggable: false,
+        x: '',
+        y: '',
+        //码表
+
+        //js使用数据
+
+        //子组件使用数据
+
+        //rules
+
+      }
+    },
+
+    methods: {
+      resize(newRect) {
+        this.x = newRect.left
+        this.y = newRect.top
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .vdr.active:before {
+    outline: none;
+  }
+  .isdrag .el-button {
+    cursor: move !important;
+  }
+
+  .xyshow {
+    font-size: 22px;
+    margin: 20px;
+  }
+</style>
diff --git a/src/router.js b/src/router.js
@@ -100,6 +100,13 @@ export const ROUTES = [
             side_id: getid(),
             side_name: 'Excel Demo',
           },
+          {
+            path: '004',
+            name: 'js004',
+            component: () => import('./components/jsCom/004.vue'),
+            side_id: getid(),
+            side_name: 'Drag resize Demo',
+          },
         ]
       },
       // UI