Dialog 对话框 可拖拽
1.在 utils 中新建 dialog.js 文件
1 Vue.directive('dialogDrag', { 2 bind(el, binding, vnode, oldVnode) { 3 const dialogHeaderEl = el.querySelector('.el-dialog__header'); 4 const dragDom = el.querySelector('.el-dialog'); 5 //dialogHeaderEl.style.cursor = 'move'; 6 dialogHeaderEl.style.cssText += ';cursor:move;' 7 // dragDom.style.cssText += ';top:0px;' 8 // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); 9 const sty = (function() { 10 if (window.document.currentStyle) { 11 return (dom, attr) =>dom.currentStyle[attr]; 12 } else { 13 return (dom, attr) =>getComputedStyle(dom, false)[attr]; 14 } 15 })() 16 17 dialogHeaderEl.onmousedown = (e) => { 18 // 鼠标按下，计算当前元素距离可视区的距离 19 const disX = e.clientX - dialogHeaderEl.offsetLeft; 20 const disY = e.clientY - dialogHeaderEl.offsetTop; 21 22 const screenWidth = document.body.clientWidth; // body当前宽度 23 const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取) 24 25 const dragDomWidth = dragDom.offsetWidth; // 对话框宽度 26 const dragDomheight = dragDom.offsetHeight; // 对话框高度 27 28 const minDragDomLeft = (dragDom.offsetLeft-dragDomWidth/2); 29 const maxDragDomLeft = screenWidth - minDragDomLeft - dragDomWidth; 30 const minDragDomTop = (dragDom.offsetTop-dragDomheight/2); 31 const maxDragDomTop = screenHeight - minDragDomTop-40; 32 33 // 获取到的值带px 正则匹配替换 34 let styL = sty(dragDom, 'left'); 35 let styT = sty(dragDom, 'top'); 36 37 // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px 38 if (styL.includes('%')) { 39 styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100); 40 styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100); 41 } else { 42 styL = +styL.replace(/\px/g, ''); 43 styT = +styT.replace(/\px/g, ''); 44 }; 45 46 document.onmousemove = function(e) { 47 // 通过事件委托，计算移动的距离 48 let left = e.clientX - disX; 49 let top = e.clientY - disY; 50 // 边界处理 51 if (-(left) > minDragDomLeft) { 52 left = -(minDragDomLeft); 53 } 54 else if (left > maxDragDomLeft) { 55 left = maxDragDomLeft; 56 } 57 if (-(top) > minDragDomTop) { 58 top = -(minDragDomTop); 59 } 60 else if (top > maxDragDomTop) { 61 top = maxDragDomTop; 62 } 63 // 移动当前元素 64 dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`; 65 }; 66 67 document.onmouseup = function(e) { 68 document.onmousemove = null; 69 document.onmouseup = null; 70 }; 71 } 72 } 73 })
2、main.js中导入
1 import draggable from 'vuedraggable'; 2 Vue.use(draggable);
3、使用 el-dialog 的地方加入 v-dialogDrag
1 <el-dialog 2 v-dialogDrag 3 :title="dialogTitle" 4 :show-close="false" 5 :close-on-click-modal="false" 6 :close-on-press-escape="false" 7 :visible.sync="showDialog" 8 > 9 </el-dialog>
注：原创 小太阳...
