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，我們一起進步！！！