关于vue.js:elementui的eldialog和eldrawer当鼠标拖动到遮罩层会触发关闭bug修复

咱们在应用 el-dialog 和 el-drawer 时候，当弹框内有表单，用户不小心想复制个内容，拖动光标，最初光标落点在 dialog 或者 drawer 的遮罩层，导致弹框敞开，而将用户辛苦填写的内容给革除掉了。这是甲方爸爸忍耐不了的！！！因而就呈现了我这个解决办法！

1. 在 src 目录下，（既和 main.js）同级创立一个名为 fixMouseOutsideAutoClose.js。如下：

   src
    |- ...
    |- src
    |- main.js
    |- fixMouseOutsideAutoClose.js

2. 在 fixMouseOutsideAutoClose.js 文件内写入如下代码：

   import {Dialog, Drawer} from "element-ui";
   
   const DialogPatched = {
     extends: Dialog,
     data() {
    return {wrapperMouseDowned: false,};
     },
     mounted() {this.$el.onmousedown = (e) => {
      this.wrapperMouseDowned =
        e.target.classList.contains("el-dialog__wrapper");
    };
     },
     methods: {handleWrapperClick() {if (!this.closeOnClickModal || !this.wrapperMouseDowned) return;
      this.handleClose();},
     },
   };
   
   const DrawerPatched = {
     extends: Drawer,
     data() {
    return {wrapperMouseDowned: false,};
     },
     mounted() {this.$el.onmousedown = (e) => {
      this.wrapperMouseDowned = e.target.classList.contains("el-drawer__container");
    };
     },
     methods: {handleWrapperClick() {if (this.wrapperClosable && this.wrapperMouseDowned) {this.closeDrawer();
      }
    },
     },
   };
   
   export default {install(Vue) {Vue.component(Dialog.name, DialogPatched);
        Vue.component(Drawer.name, DrawerPatched);
     },
   };
   

3. 在 main.js 中引入此文件，且必须在 element-ui 应用之后在应用。如下：

   // main.js 内引入 fixMouseOutsideAutoClose.js
   import PATCH_fixMouseOutsideAutoClose from "./fixMouseOutsideAutoClose.js";
   // set ElementUI lang to EN
   Vue.use(ElementUI, { locale});
   // 笼罩原生 ElDialog&ElDrawer，如果是按需引入的须要在按需引入之后再 use
   Vue.use(PATCH_ElOverlayAutoClose);

按以上操作即可实现光标拖动到 dialog 内部不会主动触发敞开事件了。

究其原因不属于事件冒泡。是所有节点再页面上，鼠标抬起时候会触发点击事件。因而须要再原始节点鼠标按下时候给一个状态，如果 click 事件触发的元素不是按下鼠标的元素则让 click 事件生效即可。