mirror of
				https://github.com/pure-admin/vue-pure-admin.git
				synced 2025-11-03 13:44:47 +08:00 
			
		
		
		
	fix: 对未解绑的公共事件,在页面销毁时解绑
This commit is contained in:
		
							parent
							
								
									ba2ec8aca2
								
							
						
					
					
						commit
						c06ce94746
					
				@ -1,7 +1,7 @@
 | 
				
			|||||||
<script setup lang="ts">
 | 
					<script setup lang="ts">
 | 
				
			||||||
import { ref, computed } from "vue";
 | 
					 | 
				
			||||||
import { emitter } from "@/utils/mitt";
 | 
					import { emitter } from "@/utils/mitt";
 | 
				
			||||||
import { onClickOutside } from "@vueuse/core";
 | 
					import { onClickOutside } from "@vueuse/core";
 | 
				
			||||||
 | 
					import { ref, computed, onMounted, onBeforeUnmount } from "vue";
 | 
				
			||||||
import Close from "@iconify-icons/ep/close";
 | 
					import Close from "@iconify-icons/ep/close";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const target = ref(null);
 | 
					const target = ref(null);
 | 
				
			||||||
@ -27,9 +27,16 @@ onClickOutside(target, (event: any) => {
 | 
				
			|||||||
  show.value = false;
 | 
					  show.value = false;
 | 
				
			||||||
});
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					onMounted(() => {
 | 
				
			||||||
  emitter.on("openPanel", () => {
 | 
					  emitter.on("openPanel", () => {
 | 
				
			||||||
    show.value = true;
 | 
					    show.value = true;
 | 
				
			||||||
  });
 | 
					  });
 | 
				
			||||||
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					onBeforeUnmount(() => {
 | 
				
			||||||
 | 
					  // 解绑`openPanel`公共事件,防止多次触发
 | 
				
			||||||
 | 
					  emitter.off("openPanel");
 | 
				
			||||||
 | 
					});
 | 
				
			||||||
</script>
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<template>
 | 
					<template>
 | 
				
			||||||
 | 
				
			|||||||
@ -7,9 +7,9 @@ import leftCollapse from "./leftCollapse.vue";
 | 
				
			|||||||
import { useNav } from "@/layout/hooks/useNav";
 | 
					import { useNav } from "@/layout/hooks/useNav";
 | 
				
			||||||
import { storageLocal } from "@pureadmin/utils";
 | 
					import { storageLocal } from "@pureadmin/utils";
 | 
				
			||||||
import { responsiveStorageNameSpace } from "@/config";
 | 
					import { responsiveStorageNameSpace } from "@/config";
 | 
				
			||||||
import { ref, computed, watch, onBeforeMount } from "vue";
 | 
					 | 
				
			||||||
import { findRouteByPath, getParentPaths } from "@/router/utils";
 | 
					import { findRouteByPath, getParentPaths } from "@/router/utils";
 | 
				
			||||||
import { usePermissionStoreHook } from "@/store/modules/permission";
 | 
					import { usePermissionStoreHook } from "@/store/modules/permission";
 | 
				
			||||||
 | 
					import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const route = useRoute();
 | 
					const route = useRoute();
 | 
				
			||||||
const showLogo = ref(
 | 
					const showLogo = ref(
 | 
				
			||||||
@ -51,12 +51,6 @@ function getSubMenuData(path: string) {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
getSubMenuData(route.path);
 | 
					getSubMenuData(route.path);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
onBeforeMount(() => {
 | 
					 | 
				
			||||||
  emitter.on("logoChange", key => {
 | 
					 | 
				
			||||||
    showLogo.value = key;
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
});
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
watch(
 | 
					watch(
 | 
				
			||||||
  () => [route.path, usePermissionStoreHook().wholeMenus],
 | 
					  () => [route.path, usePermissionStoreHook().wholeMenus],
 | 
				
			||||||
  () => {
 | 
					  () => {
 | 
				
			||||||
@ -65,6 +59,17 @@ watch(
 | 
				
			|||||||
    menuSelect(route.path, routers);
 | 
					    menuSelect(route.path, routers);
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
);
 | 
					);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					onMounted(() => {
 | 
				
			||||||
 | 
					  emitter.on("logoChange", key => {
 | 
				
			||||||
 | 
					    showLogo.value = key;
 | 
				
			||||||
 | 
					  });
 | 
				
			||||||
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					onBeforeUnmount(() => {
 | 
				
			||||||
 | 
					  // 解绑`logoChange`公共事件,防止多次触发
 | 
				
			||||||
 | 
					  emitter.off("logoChange");
 | 
				
			||||||
 | 
					});
 | 
				
			||||||
</script>
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<template>
 | 
					<template>
 | 
				
			||||||
 | 
				
			|||||||
@ -8,7 +8,7 @@ import { isEqual, isAllEmpty } from "@pureadmin/utils";
 | 
				
			|||||||
import { handleAliveRoute, getTopMenu } from "@/router/utils";
 | 
					import { handleAliveRoute, getTopMenu } from "@/router/utils";
 | 
				
			||||||
import { useSettingStoreHook } from "@/store/modules/settings";
 | 
					import { useSettingStoreHook } from "@/store/modules/settings";
 | 
				
			||||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 | 
					import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 | 
				
			||||||
import { ref, watch, unref, toRaw, nextTick, onBeforeMount } from "vue";
 | 
					import { ref, watch, unref, toRaw, nextTick, onBeforeUnmount } from "vue";
 | 
				
			||||||
import { useResizeObserver, useDebounceFn, useFullscreen } from "@vueuse/core";
 | 
					import { useResizeObserver, useDebounceFn, useFullscreen } from "@vueuse/core";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
 | 
					import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
 | 
				
			||||||
@ -465,7 +465,17 @@ function tagOnClick(item) {
 | 
				
			|||||||
  // showMenuModel(item?.path, item?.query);
 | 
					  // showMenuModel(item?.path, item?.query);
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
onBeforeMount(() => {
 | 
					watch([route], () => {
 | 
				
			||||||
 | 
					  activeIndex.value = -1;
 | 
				
			||||||
 | 
					  dynamicTagView();
 | 
				
			||||||
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					watch(isFullscreen, () => {
 | 
				
			||||||
 | 
					  tagsViews[6].icon = Fullscreen;
 | 
				
			||||||
 | 
					  tagsViews[6].text = $t("buttons.hswholeFullScreen");
 | 
				
			||||||
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					onMounted(() => {
 | 
				
			||||||
  if (!instance) return;
 | 
					  if (!instance) return;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  // 根据当前路由初始化操作标签页的禁用状态
 | 
					  // 根据当前路由初始化操作标签页的禁用状态
 | 
				
			||||||
@ -489,19 +499,7 @@ onBeforeMount(() => {
 | 
				
			|||||||
      showMenuModel(indexPath);
 | 
					      showMenuModel(indexPath);
 | 
				
			||||||
    });
 | 
					    });
 | 
				
			||||||
  });
 | 
					  });
 | 
				
			||||||
});
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
watch([route], () => {
 | 
					 | 
				
			||||||
  activeIndex.value = -1;
 | 
					 | 
				
			||||||
  dynamicTagView();
 | 
					 | 
				
			||||||
});
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
watch(isFullscreen, () => {
 | 
					 | 
				
			||||||
  tagsViews[6].icon = Fullscreen;
 | 
					 | 
				
			||||||
  tagsViews[6].text = $t("buttons.hswholeFullScreen");
 | 
					 | 
				
			||||||
});
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
onMounted(() => {
 | 
					 | 
				
			||||||
  useResizeObserver(
 | 
					  useResizeObserver(
 | 
				
			||||||
    scrollbarDom,
 | 
					    scrollbarDom,
 | 
				
			||||||
    useDebounceFn(() => {
 | 
					    useDebounceFn(() => {
 | 
				
			||||||
@ -509,6 +507,13 @@ onMounted(() => {
 | 
				
			|||||||
    }, 200)
 | 
					    }, 200)
 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
});
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					onBeforeUnmount(() => {
 | 
				
			||||||
 | 
					  // 解绑`tagViewsChange`、`tagViewsShowModel`、`changLayoutRoute`公共事件,防止多次触发
 | 
				
			||||||
 | 
					  emitter.off("tagViewsChange");
 | 
				
			||||||
 | 
					  emitter.off("tagViewsShowModel");
 | 
				
			||||||
 | 
					  emitter.off("changLayoutRoute");
 | 
				
			||||||
 | 
					});
 | 
				
			||||||
</script>
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<template>
 | 
					<template>
 | 
				
			||||||
 | 
				
			|||||||
@ -16,7 +16,6 @@ type Events = {
 | 
				
			|||||||
    indexPath: string;
 | 
					    indexPath: string;
 | 
				
			||||||
    parentPath: string;
 | 
					    parentPath: string;
 | 
				
			||||||
  };
 | 
					  };
 | 
				
			||||||
  setAdaptive: string;
 | 
					 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export const emitter: Emitter<Events> = mitt<Events>();
 | 
					export const emitter: Emitter<Events> = mitt<Events>();
 | 
				
			||||||
 | 
				
			|||||||
@ -1,7 +1,6 @@
 | 
				
			|||||||
<script setup lang="ts">
 | 
					<script setup lang="ts">
 | 
				
			||||||
 | 
					import { ref } from "vue";
 | 
				
			||||||
import { list } from "./high/list";
 | 
					import { list } from "./high/list";
 | 
				
			||||||
import { ref, nextTick } from "vue";
 | 
					 | 
				
			||||||
import { emitter } from "@/utils/mitt";
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
defineOptions({
 | 
					defineOptions({
 | 
				
			||||||
  name: "PureTableHigh"
 | 
					  name: "PureTableHigh"
 | 
				
			||||||
@ -10,11 +9,6 @@ defineOptions({
 | 
				
			|||||||
const selected = ref(0);
 | 
					const selected = ref(0);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
function tabClick({ index }) {
 | 
					function tabClick({ index }) {
 | 
				
			||||||
  if (index == 0) {
 | 
					 | 
				
			||||||
    nextTick(() => {
 | 
					 | 
				
			||||||
      emitter.emit("setAdaptive");
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
  selected.value = index;
 | 
					  selected.value = index;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
</script>
 | 
					</script>
 | 
				
			||||||
 | 
				
			|||||||
@ -1,7 +1,6 @@
 | 
				
			|||||||
<script setup lang="ts">
 | 
					<script setup lang="ts">
 | 
				
			||||||
 | 
					import { ref } from "vue";
 | 
				
			||||||
import { useColumns } from "./columns";
 | 
					import { useColumns } from "./columns";
 | 
				
			||||||
import { emitter } from "@/utils/mitt";
 | 
					 | 
				
			||||||
import { ref, onMounted, onBeforeUnmount } from "vue";
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
const tableRef = ref();
 | 
					const tableRef = ref();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -15,18 +14,6 @@ const {
 | 
				
			|||||||
  onSizeChange,
 | 
					  onSizeChange,
 | 
				
			||||||
  onCurrentChange
 | 
					  onCurrentChange
 | 
				
			||||||
} = useColumns();
 | 
					} = useColumns();
 | 
				
			||||||
 | 
					 | 
				
			||||||
onMounted(() => {
 | 
					 | 
				
			||||||
  emitter.on("setAdaptive", () => {
 | 
					 | 
				
			||||||
    // 设置表格自适应高度(用于表格外的元素高度改变或者元素隐藏时主动对表格进行自适应高度调整)
 | 
					 | 
				
			||||||
    tableRef.value.setAdaptive();
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
});
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
onBeforeUnmount(() => {
 | 
					 | 
				
			||||||
  // 解绑`setAdaptive`公共事件,防止多次触发
 | 
					 | 
				
			||||||
  emitter.off("setAdaptive");
 | 
					 | 
				
			||||||
});
 | 
					 | 
				
			||||||
</script>
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<template>
 | 
					<template>
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user