主动切换隐藏嵌套的dialog

src/components/cus/CusDialog.vue

@@ -6,6 +6,7 @@
         --cus-dialog_min-height: ${minHeight};
       `"
       :modal-class="`
+        ${uuid}
         __cus-dialog ${maxHeight === 'unset' ? '' : '__cus-dialog-auto-height'} ${hiddenStyle ? '__cus-dialog-hidden-style' : ''}
       `"
       v-bind="$attrs"
@@ -63,6 +64,8 @@ import {
   nextTick
 } from 'vue'
 import {ElMessage, ElMessageBox} from "element-plus";
+import { v4 } from "uuid";
+import {useDialogLevelStore} from "@/stores/dialog-level";
 
 export default defineComponent({
   name: 'CusDialog',
@@ -100,6 +103,7 @@ export default defineComponent({
   },
   setup(props, {emit}) {
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const DialogLevelStore = useDialogLevelStore()
     const state = reactive({
       showDialog: false,
       closeConfirmTextTemp: {
@@ -107,10 +111,16 @@ export default defineComponent({
         message: '请确认是否关闭？',
         submit: '确定',
         close: '取消',
-      }
+      },
+      uuid: v4()
     })
     watch(() => props.show, (n) => {
       state.showDialog = n
+      if (n) {
+        DialogLevelStore.add(state.uuid)
+      } else {
+        DialogLevelStore.del(state.uuid)
+      }
     })
     const beforeClose = (done) => {
       CDClose(done)

src/stores/dialog-level.ts

@@ -0,0 +1,25 @@
+import {defineStore} from "pinia";
+
+export const useDialogLevelStore = defineStore('dialogLevel', {
+  state: () => ({
+    dialogShows: <any>[]
+  }),
+  getters: {
+  },
+  actions: {
+    add(key) {
+      const oldDom = document.body.getElementsByClassName(this.dialogShows[0])?.[0]
+      if (oldDom) {
+        oldDom.style.display = 'none'
+      }
+      this.dialogShows.unshift(key)
+    },
+    del(key) {
+      this.dialogShows = this.dialogShows.filter(v => v !== key)
+      const newDom = document.body.getElementsByClassName(this.dialogShows[0])?.[0]
+      if (newDom) {
+        newDom.style.display = 'unset'
+      }
+    },
+  },
+})