修复存在多级弹窗时的背景显示问题

publish/changeLog.md

@@ -1,3 +1,7 @@
+### 修复
+
+- 修复存在多级弹窗时的背景显示问题
+
 ### 变更
 
 - 设置-播放设置-优先播放320k音质选项改为“优先播放的音质”，允许选择更高优先播放的音质，如果歌曲及音源支持的话（#1839）

src/renderer/components/material/Modal.vue

@@ -2,7 +2,7 @@
   <teleport :to="teleport">
     <div v-if="showModal" ref="dom_container" :class="$style.container">
       <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
-        <div v-show="showContent" :class="[$style.modal, {[$style.filter]: teleport == '#root'}]" @click="bgClose && close()">
+        <div v-show="showContent" :class="[$style.modal, {[$style.filter]: filter}]" @click="bgClose && close()">
           <transition :enter-active-class="inClass" :leave-active-class="outClass" @after-enter="$emit('after-enter', $event)" @after-leave="handleAfterLeave">
             <div v-show="showContent" :class="$style.content" :style="contentStyle" @click.stop>
               <header :class="$style.header">
@@ -26,6 +26,7 @@ import { getRandom } from '@common/utils/common'
 import { nextTick } from '@common/utils/vueTools'
 import { appSetting } from '@renderer/store/setting'
 
+let modalCount = 0
 export default {
   props: {
     show: {
@@ -142,6 +143,8 @@ export default {
       outClass: 'animated slideOutRight',
       showModal: false,
       showContent: false,
+      modalCount: false,
+      isAddedClass: false,
       // ai: 0,
     }
   },
@@ -155,36 +158,50 @@ export default {
         maxHeight: this.maxHeight,
       }
     },
+    filter() {
+      return this.teleport == '#root' || this.modalCount > 1
+    },
   },
   watch: {
-    show: {
+    show(val) {
-      handler(val) {
+      this.handleShowChange(val)
+    },
+  },
+  mounted() {
+    if (this.show) this.handleShowChange(true)
+    this.setRandomAnimation()
+  },
+  beforeUnmount() {
+    this.removeClass()
+  },
+  methods: {
+    handleShowChange(val) {
       if (val) {
         // const dom = document.getElementById(this.teleport)
         // if (dom) {
         //   // dom.t
         // }
         this.setRandomAnimation()
+        this.modalCount = ++modalCount
         this.showModal = true
         void nextTick(() => {
-            this.$refs.dom_container.parentNode.classList.add('show-modal')
+          const node = this.$refs.dom_container.parentNode
+          if (!node.classList.contains('show-modal')) {
+            node.classList.add('show-modal')
+            this.isAddedClass = true
+          }
           this.showContent = true
         })
       } else {
-          this.$refs.dom_container?.parentNode.classList.remove('show-modal')
+        if (modalCount > 0) this.modalCount = --modalCount
+        this.removeClass()
         this.showContent = false
       }
     },
-      immediate: true,
+    removeClass() {
-    },
+      if (!this.isAddedClass) return
-  },
-  mounted() {
-    this.setRandomAnimation()
-  },
-  beforeUnmount() {
       this.$refs.dom_container?.parentNode.classList.remove('show-modal')
     },
-  methods: {
     setRandomAnimation() {
       if (appSetting['common.randomAnimate']) {
         const [animIn, animOut] = this.animates[getRandom(0, this.animates.length)]