vue el-dialog 实现弹窗无限嵌套（点击弹窗弹出新的弹窗，可以一直点击）

使用场景：

要求点击数据展示弹窗，弹窗中数据点击显示新的弹窗，里面的弹窗还可以继续点击新的弹窗，可以无限制的嵌套弹窗

为什么不用el-dialog的append-to-body？

原因：因为有些弹窗既是父弹窗又是子弹窗，所以使用的时候会报错，报一个循环嵌套错误

效果图：

可以一直无限制的点击 无限制的嵌套

 

 代码详情：

第一步：新建一个commonData.js 放到utils文件夹下

 

 封装js方法

commonData.js 文件

import Vue from "vue";
let common = {};
if (window) window.common = common;
/**
 *
 * 该common对象放置所有的共用方法
 * common.dialog()是调用弹框的方法
 */
common.dialog = function(option) {
  var m = document.createElement("div");
  document.getElementsByTagName("body")[0].appendChild(m);
  var v = "";
  let template = "";
  template = `

    
      
      

      
        
         ${option.btnShow.showSubmitText || "确 定"}
        
        
         ${option.btnShow.showCancelText || "取 消"}
        
      
     
    
    `;
  v = new Vue({
    el: m,
    data: function() {
      return {
        title: option.title,
        type: option.type,
        style: option.style,
        show_close: true,
        show: true,
        parentClass: option.parentClass,
        initData: option.initData,
      };
    },
    template: template,
    mounted: function() {
      this.$nextTick(() => {
        this.$refs.childrenRef.init('你想要传过去的值');
      });
    },
    methods: {
      closeDialog() {
        this.show = false;
      },
      // 确定按钮
      submit(){
        this.$refs.childrenRef.submit('提交')
      },
      handleClose(done) {
        var aa = document.getElementsByClassName("w680")[1];
        if (!aa) {
          var bb = document.getElementsByClassName("v-modal")[0];
          if (bb) {
            document.getElementsByTagName("body")[0].removeChild(bb);
          }
        }
        if (option.close) {
          option.close();
        }
        done();
      },
      close() {
        var aa = document.getElementsByClassName("w680")[1];
        if (!aa) {
          var bb = document.getElementsByClassName("v-modal")[0];
          if (bb) {
            document.getElementsByTagName("body")[0].removeChild(bb);
          }
        }
        if (option.close) {
          option.close();
        }
      },
      callback(result) {
        if (option._source != null) {
          option.callback.call(option._source, result);
          this.show = false;
          return;
        }
        //如果不传type或者type等于close或cancel直接关闭弹框
        if (!result.type || result.type == "close" || result.type == "cancel") {
          this.show = false;
        } else if (result.type == "sure") {
          //如果type等于sure则调用parent传递过来的回调函
          this.show = false;
          if (option.callback) {
            option.callback(result.data);
          }
        }
      }
    },
    components: {
      child: option.component
    }
  });
  return v;
};

export default common;

 第二步：创建vue文件

创建文件夹 testDialog 文件夹 根据自己需要创建文件夹（这个是我用于演示的，根据自己项目自行创建就可以）

 index.vue文件

html部分

js部分

 css部分

dialog.vue 文件

html部分

js部分

css部分

剩下两个文件按照这个自行创建即可 想无限制循环 最后一个文件的弹窗写到第一个 就可以无限制嵌套！

开发不易，喜欢的点个关注，点个赞，谢谢！