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 = `<div class="w680" v-if="show"><el-dialog:title="title":visible.sync="show"width="${option.DialogWidth ? option.DialogWidth : "70%"}"top="${option.Dialogtop ? option.Dialogtop : "15vh"}":class="parentClass":close-on-click-modal="false":close-on-press-escape="false" :before-close="handleClose" @close="close"><child v-on:callback="callback" ref="childrenRef" @closeDialog="closeDialog"></child><span style="display: flex; justify-content: center; align-items: center" slot="footer" class="dialog-footer" v-if='${option.btnShow.show}'><el-button size="small" style="padding: 8px 25px;background: #089d81;color: #fff;border: 1px solid #089d81;" v-if='${option.btnShow.showSubmit}' @click="submit">${option.btnShow.showSubmitText || "确 定"}</el-button><el-button size="small" style="padding: 8px 25px;background: #089d81;color: #fff;border: 1px solid #089d81;" @click="show = false" v-if='${option.btnShow.showCancel}'>${option.btnShow.showCancelText || "取 消"}</el-button></span></el-dialog></div>`;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部分

<template><divstyle="width:200px;height:200px;background:#eee;color:#000;"@click="openDialog"class="div">点我开启无限弹窗之旅</div>
</template>

js部分


<script>
import common from "@/utils/commonData.js";
import dialog from "./components/dialog.vue";
export default {data() {return {};},methods: {openDialog() {var obj = {aa: "1"};let option = {title: "我是弹窗0000000000000", //标题initData: obj, // 传过去的值type: "addInspection", //多个不同需求的弹窗可以通过type区分DialogWidth: "60%", //弹窗宽度 默认不写是70%Dialogtop: "3vh", //弹窗距离顶部高度 默认不写是15vhbtnShow: {show: true, //是否展示按钮showSubmit: true, //是否展示确定按钮// showSubmitText: "", //确定按钮文字替换（非必填项，可写可不写 不写默认是确定）showCancel: true //是否展示取消按钮// showCancelText: "" //取消按钮文字替换（（非必填项，可写可不写 不写默认是取消）},parentClass: "addInspection", //class名component: dialog // 组件};common.dialog(option);}}
};
</script>

css部分

<style>
.div {display: flex;align-items: center;cursor: pointer;justify-content: center;position: fixed;left: calc(50% - 100px);top: 30%;
}
</style>

dialog.vue 文件