فهرست منبع

打印弹框可拖动

lilei 3 سال پیش
والد
کامیت
2efbe9eac9
4فایلهای تغییر یافته به همراه80 افزوده شده و 2 حذف شده
  1. 1 1
      public/version.json
  2. 76 0
      src/core/directives/dragModal.js
  3. 1 0
      src/core/use.js
  4. 2 1
      src/views/common/pdfViewModal.vue

+ 1 - 1
public/version.json

@@ -1,5 +1,5 @@
 {
   "message": "发现有新版本发布,确定更新系统?",
   "vendorJsVersion": "",
-  "version": 1655435510325
+  "version": 1655437967255
 }

+ 76 - 0
src/core/directives/dragModal.js

@@ -0,0 +1,76 @@
+import Vue from 'vue'
+/*定义a-modal弹框可拖拽*/
+const dragModal = Vue.directive('drag-modal', (el, bindings, vnode) => {
+    Vue.nextTick(() => {
+        let { visible, destroyOnClose } = vnode.componentInstance
+        // 防止未定义 destroyOnClose 关闭弹窗时dom未被销毁,指令被重复调用
+        if (!visible) return
+        let modal = el.getElementsByClassName('ant-modal')[0]
+
+        let header = el.getElementsByClassName('ant-modal-header')[0]
+        let left = 0
+        let top = 0
+        // 未定义 destroyOnClose 时,dom未被销毁,关闭弹窗再次打开,弹窗会停留在上一次拖动的位置
+        if (!destroyOnClose) {
+            left = modal.left || 0
+            top = modal.top || 0
+        }
+        header.onmousedown = e => {
+            let startX = e.clientX;
+            let startY = e.clientY;
+            header.left = header.offsetLeft;
+            header.top = header.offsetTop;
+            header.style.cursor = 'move'
+            el.onmousemove = event => {
+                let endX = event.clientX;
+                let endY = event.clientY;
+                  // 左右拖拽的距离
+                modal.left = header.left + (endX - startX) + left; 
+                //上下拖拽的距离
+                modal.top = header.top + (endY - startY) + top;
+                //屏幕边界X
+                const screenX = (document.body.offsetWidth + 17 - modal.offsetWidth) / 2
+                //屏幕边界Y
+                const screenY = (document.body.offsetHeight - modal.offsetHeight) / 2
+        
+                //判断拖拽是否超出屏幕  X
+                if (Math.abs(modal.left) > screenX) {
+                    if (modal.left < 0) {
+                        modal.style.left = -screenX + 'px'
+                    }
+                    if (modal.left > 0) {
+                        modal.style.left = screenX + 'px'
+                    }
+
+                } else {
+                    modal.style.left = modal.left + 'px'
+                }
+                //判断拖拽是否超出屏幕  Y
+                if (Math.abs(modal.top) > screenY) {
+                    if (modal.top < 0) {
+                        modal.style.top = -screenY + 'px'
+                    }
+                    if (modal.top > 0) {
+                        modal.style.top = screenY + 'px'
+                    }
+
+                } else {
+                    modal.style.top = modal.top + 'px'
+                }
+
+            }
+            el.onmouseup = event => {
+                left = modal.left
+                top = modal.top
+                el.onmousemove = null;
+                el.onmouseup = null;
+                header.style.cursor = 'auto'
+                header.releaseCapture && header.releaseCapture();
+            }
+            header.setCapture && header.setCapture();
+            return false
+        }
+    })
+})
+
+export default dragModal

+ 1 - 0
src/core/use.js

@@ -15,6 +15,7 @@ import PageLoading from '@/components/PageLoading'
 import PermissionHelper from '@/utils/helper/permission'
 // import '@/components/use'
 import './directives/hasPermission'
+import './directives/dragModal'
 
 VueClipboard.config.autoSetContainer = true
 

+ 2 - 1
src/views/common/pdfViewModal.vue

@@ -1,13 +1,14 @@
 <template>
   <a-modal
     centered
+    v-drag-modal
     class="common-pdfView-modal"
     :footer="null"
     :maskClosable="false"
     v-model="isShow"
     :title="modalTit"
     :zIndex="1001"
-    destroyOnClose
+    :destroyOnClose="true"
     @cancel="handleCommonCancel"
     width="1000px">
     <a-spin :spinning="spinning" tip="Loading...">