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

wufei123 2025-03-12 阅读:46 评论:0

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

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

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

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

一、创建自定义指令

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

二、编写指令代码

drag.js (核心拖拽逻辑):

PHP

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 (指令注册):

PHP

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;

三、在组件中使用指令

导入指令: 在需要使用拖拽功能的组件中导入自定义指令：

PHP

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

应用指令: 在el-dialog组件上添加v-el-drag-dialog指令：

PHP

<el-dialog :visible.sync="dialogVisible" title="错误信息" v-el-drag-dialog>
  <!-- 弹窗内容 -->
</el-dialog>

监听事件 (可选): 在组件中监听dragDialog事件，以便在拖拽结束后执行其他操作：

PHP

<el-dialog :visible.sync="dialogVisible" title="错误信息" v-el-drag-dialog @dragDialog="onDragEnd">
  <!-- 弹窗内容 -->
</el-dialog>

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