首页AI图标拖拽

src/directive/dialog/drag.js

@@ -0,0 +1,41 @@
+/**
+ * v-dialogDrag 弹窗拖拽
+ * Copyright (c) 2019 ruoyi
+ */
+
+export default {
+  bind(el, binding, vnode, oldVnode) {
+    const value = binding.value;
+    if (value == false) return;
+    var startX = 0;
+    var startY = 0;
+    el.addEventListener(
+      'touchstart',
+      function (e) {
+        e.stopPropagation();
+        startX = e.targetTouches[0].pageX - this.offsetLeft;
+        startY = e.targetTouches[0].pageY - this.offsetTop;
+      },
+      false
+    );
+    el.addEventListener(
+      'touchmove',
+      function (e) {
+        e.stopPropagation();
+        var leftX = e.targetTouches[0].pageX - startX;
+        var topY = e.targetTouches[0].pageY - startY;
+        var thisW = e.targetTouches[0].target.clientWidth;
+        var parentW = e.targetTouches[0].target.offsetParent.clientWidth;
+        var thisH = e.targetTouches[0].target.clientHeight;
+        var parentH = e.targetTouches[0].target.offsetParent.clientHeight;
+
+        console.log('leftX=' + leftX);
+        console.log('topY=' + topY);
+        this.style.left = leftX + 'px';
+        this.style.top = topY + 'px';
+      },
+      false
+    );
+    el.addEventListener('touchend', function (e) {}, false);
+  },
+};

src/directive/index.js

@@ -0,0 +1,11 @@
+import dialogDrag from './dialog/drag';
+
+const install = function (Vue) {
+  Vue.directive('dialogDrag', dialogDrag);
+};
+
+if (window.Vue) {
+  Vue.use(install); // eslint-disable-line
+}
+
+export default install;

src/main.js

@@ -37,6 +37,7 @@ import ElProgress from 'element-ui/lib/progress';
 import 'element-ui/lib/theme-chalk/progress.css';
 import ElDialog from 'element-ui/lib/dialog';
 import 'element-ui/lib/theme-chalk/dialog.css';
+import directive from './directive'; // directive
 // import wx from 'weixin-js-sdk';
 // jenkins 测试打包前先合并
 
@@ -76,6 +77,8 @@ if (isProd) {
   Vue.use(vConsole);
 }
 
+Vue.use(directive);
+
 new Vue({
   router,
   store,

src/views/home/index.vue

@@ -26,15 +26,17 @@
         <bottomBtn :tabVal="tabVal" ref="bottomBtn"></bottomBtn>
       </div>
     </div>
-    <div class="AIIcon" @click="deepseek">
-      <van-icon class="img" :name="require('@/assets/ai.png')" size="40" />
+    <div class="floatingIcon" v-dialogDrag>
+      <div class="AIIcon" @click="deepseek">
+        <van-icon class="img" :name="require('@/assets/ai.png')" size="40" />
+      </div>
+      <a
+        class="feedback"
+        href="https://qiweitest.nipponpaint.com.cn/weixin/ecoRules/redirect/1064/0"
+        target="_blank"
+        ><img src="./../../assets/feedback.png"
+      /></a>
     </div>
-    <a
-      class="feedback"
-      href="https://qiweitest.nipponpaint.com.cn/weixin/ecoRules/redirect/1064/0"
-      target="_blank"
-      ><img src="./../../assets/feedback.png"
-    /></a>
     <tab-bar></tab-bar>
   </div>
 </template>
@@ -225,34 +227,31 @@ export default {
   .bottomBtn {
     margin-bottom: 55px;
   }
-  .AIIcon {
-    position: fixed;
-    /* color: #666; */
-    display: inline-block;
-    /* box-shadow: 0px 2px 7px -5px #000; */
-    /* border-radius: 100px; */
-    /* overflow: hidden; */
-    right: 14px;
-    cursor: pointer;
-    bottom: 140px;
-    /* background-color: white; */
-  }
-  .AIIcon .img {
-    border-radius: 100px;
-    float: left;
-  }
-  .AIIcon .img .van-icon__image {
-    border-radius: 100px;
-  }
-  .feedback {
+  .floatingIcon {
     position: fixed;
     bottom: 85px;
     right: 14px;
     width: 40px;
-    z-index: 9999;
-  }
-  .feedback img {
-    width: 100%;
+    z-index: 99999;
+    .AIIcon {
+      width: 100%;
+      display: inline-block;
+      cursor: pointer;
+    }
+    .AIIcon .img {
+      border-radius: 100px;
+      float: left;
+    }
+    .AIIcon .img .van-icon__image {
+      border-radius: 100px;
+    }
+    .feedback {
+      display: inline-block;
+      width: 100%;
+    }
+    .feedback img {
+      width: 100%;
+    }
   }
 }
 </style>