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