perf: 完善useTagsView

kailong321200875 · kailong321200875 · commit 175abd0aa338 · 2023-08-13T14:25:49.000+08:00
diff --git a/src/hooks/web/useTagsView.ts b/src/hooks/web/useTagsView.ts
@@ -47,12 +47,17 @@ export const useTagsView = () => {
     callback?.()
   }
 
+  const setTitle = (title: string) => {
+    tagsViewStore.setTitle(title)
+  }
+
   return {
     closeAll,
     closeLeft,
     closeRight,
     closeOther,
     closeCurrent,
-    refreshPage
+    refreshPage,
+    setTitle
   }
 }
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -339,7 +339,8 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           hidden: true,
           title: t('router.details'),
-          canTo: true
+          canTo: true,
+          activeMenu: '/function/multiple-tabs'
         }
       }
     ]
diff --git a/src/store/modules/tagsView.ts b/src/store/modules/tagsView.ts
@@ -140,6 +140,14 @@ export const useTagsViewStore = defineStore('tagsView', {
     // 设置当前选中的tag
     setSelectedTag(tag: RouteLocationNormalizedLoaded) {
       this.selectedTag = tag
+    },
+    setTitle(title: string) {
+      for (const v of this.visitedViews) {
+        if (v.path === this.selectedTag?.path) {
+          v.meta.title = title
+          break
+        }
+      }
     }
   }
 })
diff --git a/src/views/Function/MultipleTabsDemo.vue b/src/views/Function/MultipleTabsDemo.vue
@@ -3,10 +3,15 @@ import { ContentWrap } from '@/components/ContentWrap'
 import { ElInput } from 'element-plus'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
+import { useTagsView } from '@/hooks/web/useTagsView'
+
+const { setTitle } = useTagsView()
 
 const { params } = useRoute()
 
 const val = ref(params.id as string)
+
+setTitle(`详情页-${val.value}`)
 </script>
 
 <template>
diff --git a/src/views/hooks/useTagsView.vue b/src/views/hooks/useTagsView.vue
@@ -6,7 +6,8 @@ import { useRouter } from 'vue-router'
 
 const { push } = useRouter()
 
-const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage } = useTagsView()
+const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage, setTitle } =
+  useTagsView()
 
 const closeAllTabs = () => {
   closeAll(() => {
@@ -35,6 +36,10 @@ const closeCurrentTab = () => {
     push('/dashboard/analysis')
   })
 }
+
+const setTabTitle = () => {
+  setTitle(new Date().getTime().toString())
+}
 </script>
 
 <template>
@@ -45,6 +50,6 @@ const closeCurrentTab = () => {
     <ElButton @click="closeOtherTabs"> 关闭其他标签页 </ElButton>
     <ElButton @click="closeCurrentTab"> 关闭当前标签页 </ElButton>
     <ElButton @click="refresh"> 刷新当前标签页 </ElButton>
+    <ElButton @click="setTabTitle"> 修改当前标题 </ElButton>
   </ContentWrap>
 </template>
-@/hooks/web/useTagsView

Original file line number	Diff line number	Diff line change
`@@ -47,12 +47,17 @@ export const useTagsView = () => {`
`47`	`47`	`callback?.()`
`48`	`48`	`}`
`49`	`49`
	`50`	`+ const setTitle = (title: string) => {`
	`51`	`+ tagsViewStore.setTitle(title)`
	`52`	`+ }`
	`53`	`+`
`50`	`54`	`return {`
`51`	`55`	`closeAll,`
`52`	`56`	`closeLeft,`
`53`	`57`	`closeRight,`
`54`	`58`	`closeOther,`
`55`	`59`	`closeCurrent,`
`56`		`- refreshPage`
	`60`	`+ refreshPage,`
	`61`	`+ setTitle`
`57`	`62`	`}`
`58`	`63`	`}`
Original file line number	Diff line number	Diff line change
`@@ -339,7 +339,8 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [`
`339`	`339`	`meta: {`
`340`	`340`	`hidden: true,`
`341`	`341`	`title: t('router.details'),`
`342`		`- canTo: true`
	`342`	`+ canTo: true,`
	`343`	`+ activeMenu: '/function/multiple-tabs'`
`343`	`344`	`}`
`344`	`345`	`}`
`345`	`346`	`]`