在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能

1.效果展示

2.使用指令的方式实现

1. src-->directive-->dialog-->drag.js

javascript 复制代码

export default {
  bind(el, binding, vnode, oldVnode) {
    const value = binding.value
    if (value == false) return
    // 获取拖拽内容头部
    const dialogHeaderEl = el.querySelector('.el-dialog__header');
    // const dialogBodyEl = el.querySelector('.el-dialog__body');
    const dialogFooterEl = el.querySelector('.el-dialog__footer');
    const dragDom = el.querySelector('.el-dialog');
    dialogHeaderEl.style.cursor = 'move';
    dialogFooterEl.style.cursor = 'move';
    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
    dragDom.style.position = 'absolute';
    dragDom.style.marginTop = 0;
    // dragDom.style.marginBottom = 0;
    let width = dragDom.style.width;
    if (width.includes('%')) {
      width = +document.body.clientWidth * (+width.replace(/\%/g, '') / 100);
    } else {
      width = +width.replace(/\px/g, '');
    }
    dragDom.style.left = `${(document.body.clientWidth - width) / 2}px`;
    // 鼠标按下事件
    [dialogHeaderEl, dialogFooterEl]?.forEach(item => {
      item.onmousedown = (e) => {
        document.body.style.userSelect = 'none';
        // 鼠标按下，计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离)
        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;

          let finallyL = l + styL
          let finallyT = t + styT

          // 移动当前元素
          dragDom.style.left = `${finallyL}px`;
          dragDom.style.top = `${finallyT}px`
        };
        document.onmouseup = function (e) {
          document.onmousemove = null;
          document.onmouseup = null;
          document.body.style.userSelect = '';

        };
      }
    })

  }
};

2. src-->directive-->index.js

javascript 复制代码

import dialogDrag from './dialog/drag'


const install = function(Vue) {
  Vue.directive('dialogDrag', dialogDrag)
}

if (window.Vue) {
  Vue.use(install); 
}

export default install

3.src-->main.js

javascript 复制代码

import directive from "./directive"; // directive

4.使用

javascript 复制代码

 <el-dialog v-dialogDrag title="xxx" :visible.sync="open" v-if="open" width="60%" append-to-body>
    // ...

 </el-dialog>