[vue][element-ui]mousedown在Dialog上 mouseup在遮罩上時自動關閉彈窗的問題總結

感謝文章作者

https://www.jianshu.com/p/f39dcce1d5b3

問題描述

在使用element-ui在chrome版本為73+時，mousedown在Dialog上 mouseup在遮罩上時彈窗自動關閉。但是用戶希望彈窗不關閉，比如，在彈窗中復制文本很容易不小心拖出彈窗外。

原因

js的點擊事件機制在chrome73+時，表現問題（打個問號？？待深入）

優化

不使用click事件，改用mousedown和mouseup事件。在mousedown的時候記錄一下觸發區域是不是在遮罩層上，然后再在mouseup的時候再判斷一下，如果兩個出發區域都是在遮罩層上面，再執行關閉函數，否則，不關閉。

修改源碼方法

1.下載element源碼

下載地址：https://github.com/ElemeFE/element.git

2.執行npm install下載相關依賴

這個過程可能會出現一些nodejs報錯，部分解決方案查看：
https://www.cnblogs.com/danker/p/12409165.html
https://www.cnblogs.com/danker/p/12409116.html

3.打開文件夾element-dev/packages/dialog/src里的vue文件並修改

// 找到這個元素`class="el-dialog__wrapper"`，去掉點擊事件，增加mousedown和mouseup事件：
<div v-show="visible" class="el-dialog__wrapper" @mousedown="handleWrapperMousedown($event)" @mouseup="handleWrapperMouseup($event)">

...

//增加對應mousedownClassBol
data() {
  return {
    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();
  }
},

4.執行命令 npm run dist

5.將生成的lib文件夾覆蓋項目中的node_modules/element-ui下的lib文件夾，重新編譯啟動項目即可解決。