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

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;      };    };  },};

登录后复制