element-ui的el-dialog和el-drawer当鼠标拖动到遮罩层会触发关闭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_fixMouseOutsideAutoClose);

按以上操作即可实现光标拖动到dialog外部不会自动触发关闭事件了。

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