解決el-dialog彈框多重巢狀的問題。實現最好用的el-dialog

      隨著vueJs的廣泛使用，Element元件逐漸深入人心。但是在使用element元件的時候，難免會遇到一些問題。本文跟大家分享：如何解決el-dialog彈框的多重巢狀問題，實現最好用的私人dialog，當然‘最’可能有點吹流弊啦，用的好請點贊!。
      使用過el-dialog的小夥伴，應該都發現了：el-dialog不好用。 為什麼不好用？
      1.彈框不支援巢狀
       2.多個彈框之間遮罩層會相互影響
      但是在我們實際使用的過程中，又經常會有巢狀彈框的需求。雖然按照餓了麼提供的不巢狀解決方式（把彈框都平級堆在一起），再通過事件傳送和監聽等方式來也能繞開這些問題，但是這樣下來你會發現：1.多級彈框呼叫之間需要傳送很多事件，彈框相互呼叫變得很複雜 2.頁面多了很多非業務邏輯控制程式碼（可讀性變差） 3.遮罩層變得越來越黑。 4.彈框的可重用性變得很差 。比如彈框一里面開啟彈框二，控制程式碼卻要寫到彈框一的父頁面，這是不是有種隔牆撓癢的感覺！
      那麼怎樣的彈框才是合理的呢，廢話不多說先放程式碼

    add(){
            let option = {
                title: '新增專案',
                component: Add,
                _size_: 'small',
                data: {action: 'add'},
                callback(result){
                    this.loadList();
                }
            };
            common.dialog(option
 
);
        }

      上面是開啟彈框的程式碼，有沒有感覺很簡單。 在任何地方我們只要呼叫add（）方法，就會開啟內容為Add元件的彈框。我們只需要指定彈框的基本屬性：標題title、內容data、大小size、傳值。以及有時關閉彈框需要執行的回撥函式（比如重新整理列表啥的）。這樣不僅實現了彈框和彈框體的解耦，而且完美的解決了：彈框巢狀以及遮罩相互影響問題。
下面揭露common.dialog()的神祕面紗，具體程式碼如下

common.dialog = function (option) {
    //dom為解決彈框巢狀以及彈框相互影響的核心
    var dom = document.createElement('div');
    document.getElementsByTagName('body')[0
 
].appendChild(dom);
    var component = option.component;
    let template = '<div v-if="show"><el-dialog  :title="title" v-model="show" :before-close="handleClose" :size="size" @close="close"><child v-on:callback="callback" :init_data="data"> \
        </child></el-dialog></div>';
    var v = new Vue({
          el: dom,
          data: function () {
              return {
                  title: option.title,
                  size: option._size_ == null ? 'small' : option._size_,
                  modal: true,
                  close_on_press_escape: false,
                  show_close: true,
                  show: true,
                  data: option.data,
                };
            },
          template: template,
          mounted: function () {},
          methods: {
              handleClose(done){
                if (option.close) {
                  option.close();
                }
                done();
              },
              close() {
                if (option.close) {
                  option.close();
                }
              },
              callback(result) {
                if (!result.type || result.type == 'close' || result.type == 'cancel') {
                  this.show = false;
                } else if (result.type == 'sure') {
                  this.show = false;
                  if (option.callback) {
                    option.callback(result.data);
                  }
                }
              },
            },
          components: {
              child: option.component,
            },
        });
    return v;
  };

以上是common.dialog（）的核心程式碼，可以直接使用。需要注意的是：

1. 彈框內容的元件通過props:[“init_data”]接收option.data裡面的值。

2. 彈框內容元件如果需要呼叫關閉彈框方法
   1) 只是關閉彈框，不執行回撥（相當於點選‘取消’按鈕）

   this.$emit(“callback”,{type:'cancel'})
   2)關閉彈框並執行回撥（相當於點選’儲存’按鈕）

   this.$emit(“callback”,{type:'sure'，data:val });//其中val回撥函式的引數

   3)點選彈框右上側的X按鈕,又想執行回撥函式。只需在option裡面定義option.close函式即可

   上面是common.dialog()的部分程式碼，基本解決了el-dialog存在的問題。