更新弹窗

src/plugin/modalFrame/index.ts

@@ -1,8 +1,16 @@
 import modalFrame from "./modalFrame.vue"
-import { createApp, DefineComponent } from "vue"
+import { createApp, DefineComponent, App } from "vue"
 import ElementPlus from "element-plus"
 import zhCn from "element-plus/es/locale/lang/zh-cn"
 
+export const modalFrameSet = new Set<App<Element>>()
+export function closeAllModalFrame() {
+   ;[...modalFrameSet].map(modalFrameItem => {
+      modalFrameItem && modalFrameSet.delete(modalFrameItem)
+      modalFrameItem?.unmount()
+   })
+}
+
 type vmType = InstanceType<typeof modalFrame>
 // eslint-disable-next-line @typescript-eslint/ban-types
 export interface modalFrameOptType<T extends DefineComponent<{}, {}, any, any, any, any, any, any, any, unknown, any>> {
@@ -34,6 +42,7 @@ const instanceModalFrame = <T extends DefineComponent<{}, {}, any, any, any, any
    const vmModalFrame = modalFrameApp.mount(document.createElement("div")) as vmType
    vmModalFrame.vm = vmModalFrame
    vmModalFrame.vmApp = modalFrameApp
+   modalFrameSet.add(vmModalFrame.vmApp)
    document.body.appendChild(vmModalFrame.$el)
    vmModalFrame.$nextTick(() => {
       vmModalFrame.show = true

src/plugin/modalFrame/modalFrame.vue

@@ -32,8 +32,9 @@
 <script setup lang="ts">
 import { Close } from "@element-plus/icons-vue"
 import { addClass, removeClass } from "@/libs/tools"
-import { ref, computed, onMounted, DefineComponent, ComponentPublicInstance, App } from "vue"
+import { ref, shallowRef, computed, onMounted, DefineComponent, ComponentPublicInstance, App } from "vue"
 import { baseSize, baseWidth, size } from "@/libs/rem"
+import { modalFrameSet } from "./index"
 
 interface modalFrameDataType {
    // eslint-disable-next-line @typescript-eslint/ban-types
@@ -68,8 +69,8 @@ const props = withDefaults(defineProps<modalFrameDataType>(), {
 const bodyDom = document.querySelector("body"),
    name = "h-modalFrameBody"
 const show = ref(false) //控制动画显示隐藏
-const vm = ref<ComponentPublicInstance>()
-const vmApp = ref<App<Element>>()
+const vm = shallowRef<ComponentPublicInstance>()
+const vmApp = shallowRef<App<Element>>()
 const modalFrameTitleDom = ref<HTMLDivElement>()
 const modalFrameBoxDom = ref<HTMLDivElement>()
 const templateModal = ref<ComponentPublicInstance>()
@@ -194,6 +195,7 @@ function remove() {
 function unmount() {
    window.removeEventListener("resize", refreshPos)
    vm.value && bodyDom!.removeChild(vm.value.$el)
+   vmApp.value && modalFrameSet.delete(vmApp.value)
    vmApp.value?.unmount()
    removeClass(bodyDom, name)
 }

src/store/modules/user.ts

@@ -6,6 +6,7 @@ import { removeToken, setToken, setUserType, getUserType, removeUserType, setCOD
 import router, { resetRouter } from "@/router"
 import { httpAjax } from "@/plugin/httpAjax"
 import { menus_gym, menus_gyt } from "@/config/menus"
+import { closeAllModalFrame } from "@/plugin/modalFrame"
 
 interface userDataType {
    appKey: string
@@ -73,6 +74,7 @@ const useStore = defineStore("user", {
       resetUser() {
          this.userInfo = {}
          this.roles = undefined
+         closeAllModalFrame()
          removeToken()
          removeUserType()
          resetRouter()