Vue3 + ElementUI: 使用指令实现可拖动 el-dialog

可以使用 Vue3 的自定义指令来实现 el-dialog 的鼠标按下移动功能。/n/n首先，需要在 main.js 中注册自定义指令：/n/njavascript/nimport { createApp } from 'vue'/nimport App from './App.vue'/nimport ElementPlus from 'element-plus'/nimport 'element-plus/lib/theme-chalk/index.css'/n/nconst app = createApp(App)/napp.use(ElementPlus)/n/napp.directive('drag-dialog', {/n mounted(el) {/n let dialogHeader = el.querySelector('.el-dialog__header')/n let dragDom = el.querySelector('.el-dialog')/n dialogHeader.style.cursor = 'move'/n dialogHeader.style.userSelect = 'none'/n let sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)/n/n dialogHeader.onmousedown = (e) => {/n let disX = e.clientX - dialogHeader.offsetLeft/n let disY = e.clientY - dialogHeader.offsetTop/n/n let screenWidth = document.body.clientWidth // body当前宽度/n let screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度，但是有滚动条所以取documentElement高度)/n/n let dragDomWidth = dragDom.offsetWidth // 对话框宽度/n let dragDomheight = dragDom.offsetHeight // 对话框高度/n/n let minDragDomLeft = dragDom.offsetLeft/n let maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth/n/n let minDragDomTop = dragDom.offsetTop/n let maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight/n/n // 获取到的值带px 正则匹配替换/n let styL, styT/n/n // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px/n if (sty.left.includes('%')) {/n styL = +document.body.clientWidth * (+sty.left.replace(//%/g, '') / 100)/n styT = +document.body.clientHeight * (+sty.top.replace(//%/g, '') / 100)/n } else {/n styL = +sty.left.replace(//px/g, '')/n styT = +sty.top.replace(//px/g, '')/n }/n/n document.onmousemove = function(e) {/n // 通过事件委托，计算移动的距离/n let left = e.clientX - disX/n let top = e.clientY - disY/n/n // 边界处理/n if (-left > minDragDomLeft) {/n left = -minDragDomLeft/n } else if (left > maxDragDomLeft) {/n left = maxDragDomLeft/n }/n/n if (-top > minDragDomTop) {/n top = -minDragDomTop/n } else if (top > maxDragDomTop) {/n top = maxDragDomTop/n }/n/n // 移动当前元素/n dragDom.style.left = `${left + styL}px`/n dragDom.style.top = `${top + styT}px`/n/n // 将此时的位置传出去/n // binding.value({x:e.pageX,y:e.pageY})/n }/n/n document.onmouseup = function() {/n document.onmousemove = null/n document.onmouseup = null/n }/n }/n }/n})/n/napp.mount('#app')/n/n/n然后，在组件中使用指令：/n/nhtml/n<el-dialog/n v-drag-dialog/n title='提示'/n :visible.sync='dialogVisible'/n :before-close='handleClose'/n>/n <span>这是一段信息</span>/n <span slot='footer' class='dialog-footer'>/n <el-button @click='dialogVisible = false'>取 消</el-button>/n <el-button type='primary' @click='dialogVisible = false'>确 定</el-button>/n </span>/n</el-dialog>/n/n/n这样，就可以实现 el-dialog 的鼠标按下移动功能了。/n