feat(projects): 增加设置当前Tab页签名称功能

soybeanjs · Jun 14, 2022 · 487213b · 487213b
1 parent 4ee0d94
commit 487213b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/src/store/modules/tab/index.ts b/src/store/modules/tab/index.ts
@@ -1,3 +1,5 @@
+import { unref } from 'vue';
+import type { Ref } from 'vue';
 import type { Router, RouteLocationNormalizedLoaded } from 'vue-router';
 import { defineStore } from 'pinia';
 import { useRouterPush } from '@/composables';
@@ -50,6 +52,16 @@ export const useTabStore = defineStore('tab-store', {
     setActiveTab(fullPath: string) {
       this.activeTab = fullPath;
     },
+    /**
+     * 设置当前路由对应的页签title
+     * @param title - tab名称
+     */
+    setActiveTabTitle(title: string | Ref<string>) {
+      const item = this.tabs.find(tab => tab.fullPath === this.activeTab);
+      if (item) {
+        Object.assign(item, { meta: { title: unref(title) } });
+      }
+    },
     /**
      * 初始化首页页签路由
      * @param routeHomeName - 路由首页的name

diff --git a/src/views/function/tab/index.vue b/src/views/function/tab/index.vue
@@ -5,16 +5,24 @@
         <n-button @click="handleToTabDetail">跳转Tab Detail</n-button>
         <n-button @click="handleToTabMultiDetail(1)">跳转Tab Multi Detail 1</n-button>
         <n-button @click="handleToTabMultiDetail(2)">跳转Tab Multi Detail 2</n-button>
+        <n-input-group>
+          <n-input v-model:value="title" />
+          <n-button type="primary" @click="handleSetTitle">设置当前Tab页标题</n-button>
+        </n-input-group>
       </n-space>
     </n-card>
   </n-space>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
 import { routeName } from '@/router';
+import { useTabStore } from '@/store';
 import { useRouterPush } from '@/composables';
 
 const { routerPush } = useRouterPush();
+const tabStore = useTabStore();
+const title = ref('');
 
 function handleToTabDetail() {
   routerPush({ name: routeName('function_tab-detail'), query: { name: 'abc' }, hash: '#DEMO_HASH' });
@@ -23,6 +31,14 @@ function handleToTabDetail() {
 function handleToTabMultiDetail(num: number) {
   routerPush({ name: routeName('function_tab-multi-detail'), query: { name: 'abc', num }, hash: '#DEMO_HASH' });
 }
+
+function handleSetTitle() {
+  if (!title.value) {
+    window.$message?.warning('请输入要设置的标题名称');
+  } else {
+    tabStore.setActiveTabTitle(title.value);
+  }
+}
 </script>
 
 <style scoped></style>