Browse Source
feat(tabs): 支持计算属性作为标签标题,解决 #6170 的问题 (#6163)
* feat(tabs): 支持动态函数作为标签标题
修改 `setTabTitle` 和 `tabsView` 逻辑,允许传入函数作为标签标题,以便动态生成标题内容
* feat(tabbar): 添加动态设置标签页标题功能
允许设置静态字符串或动态函数作为标签标题,支持根据状态或语言变化动态更新标题
* refactor(tabs): 移除冗余的newTabTitle2变量并优化标题设置逻辑
移除tabs组件中冗余的newTabTitle2变量,直接使用newTabTitle作为标题来源。同时,优化use-tabs和tabbar模块的标题设置逻辑,支持ComputedRef作为动态标题,提升代码简洁性和可维护性。
---------
Co-authored-by: yuanwj <ywj6792341@qq.com>
pull/6210/head
XiaoHetitu
9 months ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with
36 additions and
4 deletions
-
packages/effects/hooks/src/use-tabs.ts
-
packages/stores/src/modules/tabbar.ts
|
|
|
@ -1,3 +1,4 @@ |
|
|
|
import type { ComputedRef } from 'vue'; |
|
|
|
import type { RouteLocationNormalized } from 'vue-router'; |
|
|
|
|
|
|
|
import { useRoute, useRouter } from 'vue-router'; |
|
|
|
@ -53,7 +54,24 @@ export function useTabs() { |
|
|
|
await tabbarStore.closeTabByKey(key, router); |
|
|
|
} |
|
|
|
|
|
|
|
async function setTabTitle(title: string) { |
|
|
|
/** |
|
|
|
* 设置当前标签页的标题 |
|
|
|
* |
|
|
|
* @description 支持设置静态标题字符串或动态计算标题 |
|
|
|
* @description 动态标题会在每次渲染时重新计算,适用于多语言或状态相关的标题 |
|
|
|
* |
|
|
|
* @param title - 标题内容 |
|
|
|
* - 静态标题: 直接传入字符串 |
|
|
|
* - 动态标题: 传入 ComputedRef |
|
|
|
* |
|
|
|
* @example |
|
|
|
* // 静态标题
|
|
|
|
* setTabTitle('标签页') |
|
|
|
* |
|
|
|
* // 动态标题(多语言)
|
|
|
|
* setTabTitle(computed(() => t('page.title'))) |
|
|
|
*/ |
|
|
|
async function setTabTitle(title: ComputedRef<string> | string) { |
|
|
|
tabbarStore.setUpdateTime(); |
|
|
|
await tabbarStore.setTabTitle(route, title); |
|
|
|
} |
|
|
|
|
|
|
|
@ -1,3 +1,4 @@ |
|
|
|
import type { ComputedRef } from 'vue'; |
|
|
|
import type { Router, RouteRecordNormalized } from 'vue-router'; |
|
|
|
|
|
|
|
import type { TabDefinition } from '@vben-core/typings'; |
|
|
|
@ -401,10 +402,23 @@ export const useTabbarStore = defineStore('core-tabbar', { |
|
|
|
|
|
|
|
/** |
|
|
|
* @zh_CN 设置标签页标题 |
|
|
|
* @param tab |
|
|
|
* @param title |
|
|
|
* |
|
|
|
* @zh_CN 支持设置静态标题字符串或计算属性作为动态标题 |
|
|
|
* @zh_CN 当标题为计算属性时,标题会随计算属性值变化而自动更新 |
|
|
|
* @zh_CN 适用于需要根据状态或多语言动态更新标题的场景 |
|
|
|
* |
|
|
|
* @param {TabDefinition} tab - 标签页对象 |
|
|
|
* @param {ComputedRef<string> | string} title - 标题内容,支持静态字符串或计算属性 |
|
|
|
* |
|
|
|
* @example |
|
|
|
* // 设置静态标题
|
|
|
|
* setTabTitle(tab, '新标签页'); |
|
|
|
* |
|
|
|
* @example |
|
|
|
* // 设置动态标题
|
|
|
|
* setTabTitle(tab, computed(() => t('common.dashboard'))); |
|
|
|
*/ |
|
|
|
async setTabTitle(tab: TabDefinition, title: string) { |
|
|
|
async setTabTitle(tab: TabDefinition, title: ComputedRef<string> | string) { |
|
|
|
const findTab = this.tabs.find( |
|
|
|
(item) => getTabPath(item) === getTabPath(tab), |
|
|
|
); |
|
|
|
|