标签导航：

ElementUI 消息框拖拽功能自定义指令实现详解

本文将详细介绍如何通过自定义指令，为elementui的el-message-box组件添加拖拽功能，解决产品需求中所有错误消息弹窗可拖拽的问题。现有代码中，错误消息弹窗通过this.$showalert.showerrormsg(errmsg)方法弹出。

如何通过自定义指令实现ElementUI消息框的拖拽功能？

一、创建自定义指令

在项目src目录下创建directive/el-drag-dialog文件夹，包含drag.js和index.js两个文件，分别封装指令逻辑和注册指令。

二、编写指令代码

  • drag.js (核心拖拽逻辑):
export default {
  bind(el, binding, vnode) {
    const dialogHeader = el.querySelector('.el-dialog__header');
    const dialog = el.querySelector('.el-dialog');
    dialogHeader.style.cursor = 'move';
    dialog.style.top = '0px';

    const getStyle = (function() {
      if (window.document.currentStyle) {
        return (dom, attr) => dom.currentStyle[attr];
      } else {
        return (dom, attr) => window.getComputedStyle(dom, null)[attr];
      }
    })();

    dialogHeader.onmousedown = (e) => {
      const disX = e.clientX - dialogHeader.offsetLeft;
      const disY = e.clientY - dialogHeader.offsetTop;
      const dragWidth = dialog.offsetWidth;
      const dragHeight = dialog.offsetHeight;
      const screenWidth = document.body.clientWidth;
      const screenHeight = document.body.clientHeight;
      let minLeft = 0;
      let maxLeft = screenWidth - dragWidth;
      let minTop = 0;
      let maxTop = screenHeight - dragHeight;

      let originalLeft = parseInt(getStyle(dialog, 'left'), 10) || 0;
      let originalTop = parseInt(getStyle(dialog, 'top'), 10) || 0;

      document.onmousemove = (e) => {
        let left = e.clientX - disX + originalLeft;
        let top = e.clientY - disY + originalTop;

        left = Math.max(minLeft, Math.min(left, maxLeft));
        top = Math.max(minTop, Math.min(top, maxTop));

        dialog.style.left = `${left}px`;
        dialog.style.top = `${top}px`;
        vnode.child.$emit('dragDialog'); // 触发自定义事件
      };

      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  },
};
  • index.js (指令注册):
import drag from './drag';

const install = (Vue) => {
  Vue.directive('el-drag-dialog', drag);
};

if (typeof window !== 'undefined' && window.Vue) {
  window.elDragDialog = drag;
  window.Vue.use(install);
}

drag.install = install;
export default drag;

三、在组件中使用指令

  1. 导入指令: 在需要使用拖拽功能的组件中导入自定义指令：
import elDragDialog from '@/directive/el-drag-dialog';
  1. 应用指令: 在el-dialog组件上添加v-el-drag-dialog指令：
<el-dialog :visible.sync="dialogVisible" title="错误信息" v-el-drag-dialog>
  <!-- 弹窗内容 -->
</el-dialog>
  1. 监听事件 (可选): 在组件中监听dragDialog事件，以便在拖拽结束后执行其他操作：
<el-dialog :visible.sync="dialogVisible" title="错误信息" v-el-drag-dialog @dragDialog="onDragEnd">
  <!-- 弹窗内容 -->
</el-dialog>

methods: {
  onDragEnd() {
    console.log('Dialog drag ended');
    // 在这里添加拖拽结束后的操作
  }
}

通过以上步骤，即可实现ElementUI消息框的拖拽功能。 请根据你的项目实际路径调整导入路径。 代码已优化，处理了边界情况和初始位置，并添加了自定义事件dragDialog方便后续扩展。