From 5a0d763963ff72c6b54959a1c848daed27d150a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E4=B8=96=E5=BC=BA?= Date: Mon, 12 Jun 2023 16:53:27 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AE=A2=E5=8D=95=E5=AF=BC=E5=85=A5=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- SC-web/src/main.js | 2 + SC-web/src/utils/directives.js | 79 +++++++++++++++++++ .../scm/basicInformation/natural/Form.vue | 2 +- .../scm/basicInformation/tradeupload/Form.vue | 2 +- .../basicInformation/tradeupload/Form2.vue | 2 +- .../basicInformation/tradeupload/Form3.vue | 5 +- .../basicInformation/tradeupload/Form4.vue | 2 +- .../basicInformation/tradeupload/Form5.vue | 2 +- .../scm/basicInformation/vehicle/Form.vue | 2 +- 9 files changed, 91 insertions(+), 7 deletions(-) create mode 100644 SC-web/src/utils/directives.js diff --git a/SC-web/src/main.js b/SC-web/src/main.js index 2a332610..04c7400a 100644 --- a/SC-web/src/main.js +++ b/SC-web/src/main.js @@ -22,6 +22,8 @@ import { message } from './utils/message'; import * as filters from './filters' // global filters +import './utils/directives.js'; + // 自定义按钮权限指令 import permission from "@/directive/permission"; Vue.use(permission) diff --git a/SC-web/src/utils/directives.js b/SC-web/src/utils/directives.js new file mode 100644 index 00000000..37edecd7 --- /dev/null +++ b/SC-web/src/utils/directives.js @@ -0,0 +1,79 @@ +import Vue from 'vue'; +// v-dialogDrag: 弹窗拖拽 +Vue.directive('dialogDrag', { + bind: function(el, binding, vnode) { + const dialogHeaderEl = el.querySelector('.el-dialog__header') + const dragDom = el.querySelector('.el-dialog') + dialogHeaderEl.style.cssText += ';cursor:move;' + dragDom.style.cssText += ';top:0px;' + + // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); + const getStyle = (function() { + if (window.document.currentStyle) { + return (dom, attr) => dom.currentStyle[attr] + } else { + return (dom, attr) => getComputedStyle(dom, false)[attr] + } + })() + + dialogHeaderEl.onmousedown = (e) => { + // 鼠标按下，计算当前元素距离可视区的距离 + const disX = e.clientX - dialogHeaderEl.offsetLeft + const disY = e.clientY - dialogHeaderEl.offsetTop + + const dragDomWidth = dragDom.offsetWidth + const dragDomheight = dragDom.offsetHeight + + const screenWidth = document.body.clientWidth + const screenHeight = document.body.clientHeight + + const minDragDomLeft = dragDom.offsetLeft + const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth + + const minDragDomTop = dragDom.offsetTop + const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight + + // 获取到的值带px 正则匹配替换 + let styL = getStyle(dragDom, 'left') + let styT = getStyle(dragDom, 'top') + + if (styL.includes('%')) { + styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100) + styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100) + } else { + styL = +styL.replace(/\px/g, '') + styT = +styT.replace(/\px/g, '') + } + + document.onmousemove = function(e) { + // 通过事件委托，计算移动的距离 + let left = e.clientX - disX + let top = e.clientY - disY + + // 边界处理 + if (-(left) > minDragDomLeft) { + left = -minDragDomLeft + } else if (left > maxDragDomLeft) { + left = maxDragDomLeft + } + + if (-(top) > minDragDomTop) { + top = -minDragDomTop + } else if (top > maxDragDomTop) { + top = maxDragDomTop + } + + // 移动当前元素 + dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;` + + // emit onDrag event + vnode&&vnode.child.$emit('dragDialog') + } + + document.onmouseup = function() { + document.onmousemove = null + document.onmouseup = null + } + } + } +}); diff --git a/SC-web/src/views/scm/basicInformation/natural/Form.vue b/SC-web/src/views/scm/basicInformation/natural/Form.vue index 1d7eb010..4761641e 100644 --- a/SC-web/src/views/scm/basicInformation/natural/Form.vue +++ b/SC-web/src/views/scm/basicInformation/natural/Form.vue @@ -1,6 +1,6 @@