vue+element实现弹窗拖拽

客官°小女子只卖身不卖艺 2023-03-13 11:41 27阅读 0赞

因为element没有自带弹窗拖拽效果，所以就需要自定义指令去控制
    可能写的不好，请多指教
    首先新建一个js,作为指令
    import Vue from 'vue';
     
    /**** *自定义弹窗拖拽指令 *Autor USER-T * time 2020-05-13 **** */
    // v-dialogDrag: 弹窗拖拽
    Vue.directive('dialogDrag', { 
      bind(el, binding, vnode, oldVnode) { 
        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 (e) { 
            document.onmousemove = null;
            document.onmouseup = null;
          };
        }
      }
    })
     
    // v-dialogDragWidth: 弹窗宽度拖大 拖小
    Vue.directive('dialogDragWidth', { 
      bind(el, binding, vnode, oldVnode) { 
        const dragDom = binding.value.$el.querySelector('.el-dialog');
     
        el.onmousedown = (e) => { 
     
          // 鼠标按下，计算当前元素距离可视区的距离
          const disX = e.clientX - el.offsetLeft;
     
          document.onmousemove = function (e) { 
            e.preventDefault(); // 移动时禁用默认事件
     
            // 通过事件委托，计算移动的距离
            const l = e.clientX - disX;
            dragDom.style.width = `${ l}px`;
          };
     
          document.onmouseup = function (e) { 
            document.onmousemove = null;
            document.onmouseup = null;
          };
        }
      }
    })
    
    第二步，在main.js中引用这个js，方便全局调用指令
    import '@/utils/directives.js'  //我的习惯一般放在工具栏
    第三步，可以直接调用
    <el-dialog
         v-dialogDrag   //拖拽指令
          :close-on-click-modal="false"
          :title="openType==='add'?'修理单位新增':'修理单位编辑'"
          :visible.sync="open"
          width="300px"
          @close="closeDialog"
          :modal-append-to-body="false"
        >