twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-08 01:17:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: tag

Browse Source
This commit is contained in:
lrl 2021-11-20 19:06:23 +08:00
parent 034f1577c2
commit 95140986b9
1 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/layout/components/tag/index.vue
View File

@ -33,7 +33,7 @@ import closeOther from "/@/assets/svg/close_other.svg";
import closeRight from "/@/assets/svg/close_right.svg"; import closeRight from "/@/assets/svg/close_right.svg";
import { emitter } from "/@/utils/mitt"; import { emitter } from "/@/utils/mitt";
import { templateRef } from "@vueuse/core"; import { templateRef, useResizeObserver, useDebounceFn } from "@vueuse/core";
import { transformI18n } from "/@/utils/i18n"; import { transformI18n } from "/@/utils/i18n";
import { storageLocal } from "/@/utils/storage"; import { storageLocal } from "/@/utils/storage";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
@ -54,12 +54,24 @@ const tabDom = templateRef<HTMLElement | null>("tabDom", null);
const containerDom = templateRef<HTMLElement | null>("containerDom", null); const containerDom = templateRef<HTMLElement | null>("containerDom", null);
const scrollbarDom = templateRef<HTMLElement | null>("scrollbarDom", null); const scrollbarDom = templateRef<HTMLElement | null>("scrollbarDom", null);
watch([route], () => { const dynamicTagView = () => {
const index = dynamicTagList.value.findIndex(item => { const index = dynamicTagList.value.findIndex(item => {
return item.path === route.path; return item.path === route.path;
}); });
moveToView(index); moveToView(index);
};
watch([route], () => {
dynamicTagView();
}); });
useResizeObserver(
scrollbarDom,
useDebounceFn(() => {
dynamicTagView();
}, 200)
);
const tabNavPadding = 10; const tabNavPadding = 10;
const moveToView = (index: number): void => { const moveToView = (index: number): void => {
if (!instance.refs["dynamic" + index]) { if (!instance.refs["dynamic" + index]) {
@ -72,7 +84,7 @@ const moveToView = (index: number): void => {
const scrollbarDomWidth = scrollbarDom.value const scrollbarDomWidth = scrollbarDom.value
? scrollbarDom.value.offsetWidth ? scrollbarDom.value.offsetWidth
: 0; : 0;
// 标签页导航栏总长度（包含溢出部分） // 已有标签页总长度（包含溢出部分）
const tabDomWidth = tabDom.value ? tabDom.value.offsetWidth : 0; const tabDomWidth = tabDom.value ? tabDom.value.offsetWidth : 0;
if (tabDomWidth < scrollbarDomWidth || tabItemElOffsetLeft === 0) { if (tabDomWidth < scrollbarDomWidth || tabItemElOffsetLeft === 0) {
@ -389,7 +401,6 @@ function showMenuModel(currentPath: string, refresh = false) {
let routeLength = unref(relativeStorage.routesInStorage).length; let routeLength = unref(relativeStorage.routesInStorage).length;
// currentIndex为1时，左侧的菜单是首页，则不显示关闭左侧标签页 // currentIndex为1时，左侧的菜单是首页，则不显示关闭左侧标签页
let currentIndex = allRoute.findIndex(v => v.path === currentPath); let currentIndex = allRoute.findIndex(v => v.path === currentPath);
moveToView(currentIndex);
// 如果currentIndex等于routeLength-1，右侧没有菜单，则不显示关闭右侧标签页 // 如果currentIndex等于routeLength-1，右侧没有菜单，则不显示关闭右侧标签页
showMenus(true); showMenus(true);