ElementUI消息框如何自定义实现拖拽？

本文讲解如何为ElementUI的el-message-box组件添加拖拽功能。通过自定义指令`el-drag-dialog`，开发者可以轻松实现消息框的拖拽效果，解决弹窗无法拖动的问题。文章详细介绍了指令的编写过程，包括核心拖拽逻辑(drag.js)和指令注册(index.js)，并演示了如何在组件中使用该指令以及监听拖拽结束事件。 该方法优化了边界处理和初始位置设置，并提供自定义事件`dragDialog`以方便扩展功能，适用于需要可拖拽消息弹窗的项目。

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

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

一、创建自定义指令

在项目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';

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

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

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

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

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

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

今天关于《ElementUI消息框如何自定义实现拖拽？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！