ElementUI的Dialog弹窗实现拖拽移动功能

import drag from "./drag";  const install = function (Vue) {   Vue.directive("el-drag-dialog", drag); }; if (window.Vue) {   window["el-drag-dialog"] = drag;   Vue.use(install); }  drag.install = install; export default drag;

export default {   bind(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.child.$emit("dragDialog");       };        document.onmouseup = function () {         document.onmousemove = null;         document.onmouseup = null;       };     };   }, };

import elDragDialog from "@/directive/el-drag-dialog";

directives: {     elDragDialog },

<el-dialog       v-el-drag-dialog       title="提示"       :visible.sync="dialogVisible"       width="30%"       :before-close="handleClose"       v-if="dialogVisible"     >       <span>这是一段信息</span>       <span slot="footer" class="dialog-footer">         <el-button @click="dialogVisible = false">取 消</el-button>         <el-button type="primary" @click="dialogVisible = false"           >确 定</el-button         >       </span>     </el-dialog>

<template>   <div>     <el-button @click="dialogVisible = true">打开弹框</el-button>     <el-dialog       v-el-drag-dialog       title="提示"       :visible.sync="dialogVisible"       width="30%"       :before-close="handleClose"       v-if="dialogVisible"     >       <span>这是一段信息</span>       <span slot="footer" class="dialog-footer">         <el-button @click="dialogVisible = false">取 消</el-button>         <el-button type="primary" @click="dialogVisible = false"           >确 定</el-button         >       </span>     </el-dialog>   </div> </template>  <script> import elDragDialog from "@/directive/el-drag-dialog"; export default {   name: "DialogView",   directives: {     elDragDialog,   },   data() {     return {       dialogVisible: false,     };   },   methods: {     handleClose() {       this.dialogVisible = false;     },   }, }; </script>