element 弹窗拖拽功能实现
1、创建directives.js
文件
import Vue from "vue"; // v-dialogDrag: 弹窗拖拽 Vue.directive("dialogDrag", { bind: function (el) { const dialogHeaderEl = el.querySelector(".el-dialog__header"); const dragDom = el.querySelector(".el-dialog"); dialogHeaderEl.style.cursor = "move"; // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null); dialogHeaderEl.onmousedown = (e) => { // 鼠标按下,计算当前元素距离可视区的距离 const disX = e.clientX - dialogHeaderEl.offsetLeft; const disY = e.clientY - dialogHeaderEl.offsetTop; // 获取到的值带px 正则匹配替换 let styL, styT; // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px if (sty.left.includes("%")) { styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, "") / 100); styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, "") / 100); } else { styL = +sty.left.replace(/\px/g, ""); styT = +sty.top.replace(/\px/g, ""); } document.onmousemove = function (e) { // 通过事件委托,计算移动的距离 const l = e.clientX - disX; const t = e.clientY - disY; // 移动当前元素 dragDom.style.left = `${l + styL}px`; dragDom.style.top = `${t + styT}px`; // 将此时的位置传出去 // binding.value({x:e.pageX,y:e.pageY}) }; document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; }; }; }, });
2、在 main.js 中注册
ps:我的文件地址为 src -> utlis -> directives.js
import "./utils/directives"
3、在el-dialog 组件中使用
<el-dialog :visible.sync="dialogVisible" :closeOnClickModal="false" class="NewDialog" v-dialog-drag title="弹窗拖拽" > <div class="StartView"> <div class="popContent"></div> </div> </el-dialog>
4、注意事项
ps:可能会不定时更新
(1)关于使用后依旧无法拖拽的问题
解答:要对弹窗进行拖拽操作时,标题部分只能通过 “title="xx"” 来进行设置,不能单独设置
错误示例:
<el-dialog :visible.sync="dialogVisible" width="30%" :closeOnClickModal="false" class="NewDialog" v-dialog-drag > <div class="StartView"> <div class="popTitle"> <div class="titleName" style="font-size: 20px">弹窗拖拽</div> </div> </div> </el-dialog>
正确示例:
<el-dialog :visible.sync="dialogVisible" :closeOnClickModal="false" class="NewDialog" v-dialog-drag title="弹窗拖拽" > <div class="StartView"> <div class="popContent"></div> </div> </el-dialog>
To be continued 。。。。。。。
新手理解,若有误,请各位大佬指点,Thanks♪(・ω・)ノ