elementUI组件替换

2020已经最后一天了，都在说2020是不幸的一年，从年初到年尾，2020注定是不平静的一年。很快，我们就要对2020说再见了，原本想做个总结，结果发现也没什么好总结，2020没什么收获，最大的收获就是自己重新拾起了篮球。所以，在最后一天分享个知识点，elementUI组件替换。

最近一直在撸JQ的代码，一直在复制粘贴，把自己都给敲懵了。最近撸的代码确实是很枯燥，不过也挺佩服之前堆叠出来的这个项目，也觉得JQ是真的很不错，在操作dom这一块，是真的无敌。

最近产品提出了一个优化，element的dialog弹窗鼠标在内容层上面点击，滑动到外面的遮罩上的时候不关闭遮罩。在没有设置点击遮罩不弹出，chrome浏览器会关闭遮罩，Firefox不会，查了一下，只有几篇文章提到了这个问题，而且内容都一样，说是chrome的点击事件机制73+之后改了，解决办法就是改源码，然后打包编译替换node_modules。

说实在的，这个优化我一开始就觉得没有必要，自己怎么试都觉得是不需要这样的优化，然后产品他们说是用mac笔记本的很容易出现那样的行为。原谅我没用过mac笔记本，没办法，只好去优化了。然后就是修改源码打包编译替换node_modules的做法，我也不知道提出这样解决办法的是怎么想的，这种做法我也是很不赞同，就算是公司有私有库，或者自动发布去进行这一步的操作，我都觉得很麻烦。

最后我的解决办法也是改源码，只是是把elementUI的dialog源码拷出来，放到本地，然后替换。

下载elementUI的源码，然后把packages下的dialog文件夹整个拷贝出来，然后在引入element的地方引入dialog下的index.js。这边有一点要注意，如果是按需引入的，就是一个一个引入的，直接把从elementUI引入的Dialog去除就可以了，如果是全部引入的，不能修改Element.Dialog，我一开始直接修改这个发现没什么效果，然后看了源码，内部：

components.forEach(component => {  
    Vue.component(component.name, component);
});

所以Vue.use的时候内部是通过components去注入的，而且打包之后的引入是_webpack_require_引入，直接改Element.Dialog无效，要在注册之后重新注册替换：

Vue.use(Element, { size: "small" });

Vue.use(Dialog);

我还发现，官网的按需引入还遗漏了一些，Popconfirm和InfiniteScroll没注册。然后解决鼠标点击在内容上滑动到遮罩是自动关闭的方法就是新增这两个事件判断，去除click事件，这是直接拷贝别人的方法了，自己没有去写：

<div
      v-show="visible"
      class="el-dialog__wrapper"
      @mousedown="handleWrapperMousedown($event)"
      @mouseup="handleWrapperMouseup($event)"
    >
data() {
    return {
      closed: false,
      key: 0,
      mousedownClassBol: false,
    };
  },
handleWrapperMousedown(e) {
      this.mousedownClassBol = !!e.target.classList.contains(
        "el-dialog__wrapper"
      );
    },
    handleWrapperMouseup(e) {
      if (
        !!e.target.classList.contains("el-dialog__wrapper") &&
        this.mousedownClassBol
      ) {
        this.mousedownClassBol = false;
        this.handleWrapperClick();
      }
    },

其实也挺简单的，就是判断点击元素和鼠标离开元素是不是同一个。

这其实就是把element的源码拷贝出来当作自己的组件，算是比较好的一种解决方案。

最后，祝所有人元旦快乐！！！2021，我们一起进步！！！