edge浏览器下作的gif
有几个点需要注意一下
- 每个弹窗都要有唯一dom可操作 指令可以做到
- 拖拽时要添加可拖拽区块 header
- 由于element-ui dialog组件在设计时宽度用了百分比, 这里不同浏览器有兼容性问题
- 实现拖拽宽高时 获取边缘问题 div定位 设置模拟边缘
dialog组件的其它属性这里就不写了. 项目中的指令都定义directives.js中集中管理, 全局注册.
directives.js:1 import Vue from 'vue'; 2 3 // v-dialogDrag: 弹窗拖拽 4 Vue.directive('dialogDrag', { 5 bind(el, binding, vnode, oldVnode) { 6 const dialogHeaderEl = el.querySelector('.el-dialog__header'); 7 const dragDom = el.querySelector('.el-dialog'); 8 dialogHeaderEl.style.cursor = 'move'; 9 10 // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);11 const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);12 13 dialogHeaderEl.onmousedown = (e) => {14 // 鼠标按下，计算当前元素距离可视区的距离15 const disX = e.clientX - dialogHeaderEl.offsetLeft;16 const disY = e.clientY - dialogHeaderEl.offsetTop;17 18 // 获取到的值带px 正则匹配替换19 let styL, styT;20 21 // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px22 if(sty.left.includes('%')) {23 styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);24 styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);25 }else {26 styL = +sty.left.replace(/\px/g, '');27 styT = +sty.top.replace(/\px/g, '');28 };29 30 document.onmousemove = function (e) {31 // 通过事件委托，计算移动的距离 32 const l = e.clientX - disX;33 const t = e.clientY - disY;34 35 // 移动当前元素 36 dragDom.style.left = `${l + styL}px`;37 dragDom.style.top = `${t + styT}px`;38 39 //将此时的位置传出去40 //binding.value({x:e.pageX,y:e.pageY})41 };42 43 document.onmouseup = function (e) {44 document.onmousemove = null;45 document.onmouseup = null;46 };47 } 48 }49 })50 51 // v-dialogDragWidth: 弹窗宽度拖大 拖小52 Vue.directive('dialogDragWidth', {53 bind(el, binding, vnode, oldVnode) {54 const dragDom = binding.value.$el.querySelector('.el-dialog');55 56 el.onmousedown = (e) => {57 58 // 鼠标按下，计算当前元素距离可视区的距离59 const disX = e.clientX - el.offsetLeft;60 61 document.onmousemove = function (e) {62 e.preventDefault(); // 移动时禁用默认事件63 64 // 通过事件委托，计算移动的距离 65 const l = e.clientX - disX;66 dragDom.style.width = `${l}px`;67 };68 69 document.onmouseup = function (e) {70 document.onmousemove = null;71 document.onmouseup = null;72 };73 } 74 }75 })
main.js:
1 // 引入自定义指令2 import './directives.js';