1

我们在使用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事件失效即可。


smallStone
419 声望69 粉丝

前端一枚^_-