From 5ddccf6ba28453b9a35355d53d0db65f1a8876bc Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Tue, 1 Jun 2021 01:13:19 +0800
Subject: [PATCH] feat(tabs): add setTabTitle method (#680)
---
src/hooks/web/useTabs.ts | 10 ++++++++++
src/store/modules/multipleTab.ts | 11 +++++++++++
src/views/demo/feat/tabs/index.vue | 28 ++++++++++++++++++++++------
3 files changed, 43 insertions(+), 6 deletions(-)
diff --git a/src/hooks/web/useTabs.ts b/src/hooks/web/useTabs.ts
index b75cb36..68659e5 100644
--- a/src/hooks/web/useTabs.ts
+++ b/src/hooks/web/useTabs.ts
@@ -37,6 +37,15 @@ export function useTabs(_router?: Router) {
return tabStore.getTabList.find((item) => item.path === route.path)!;
}
+ async function updateTabTitle(title: string, tab?: RouteLocationNormalized) {
+ const canIUse = canIUseTabs;
+ if (!canIUse) {
+ return;
+ }
+ const targetTab = tab || getCurrentTab();
+ await tabStore.setTabTitle(title, targetTab);
+ }
+
async function handleTabAction(action: TableActionEnum, tab?: RouteLocationNormalized) {
const canIUse = canIUseTabs;
if (!canIUse) {
@@ -81,5 +90,6 @@ export function useTabs(_router?: Router) {
close: (tab?: RouteLocationNormalized) => {
handleTabAction(TableActionEnum.CLOSE, tab);
},
+ setTitle: (title: string, tab?: RouteLocationNormalized) => updateTabTitle(title, tab),
};
}
diff --git a/src/store/modules/multipleTab.ts b/src/store/modules/multipleTab.ts
index 848b7b2..08862fa 100644
--- a/src/store/modules/multipleTab.ts
+++ b/src/store/modules/multipleTab.ts
@@ -286,6 +286,17 @@ export const useMultipleTabStore = defineStore({
async bulkCloseTabs(pathList: string[]) {
this.tabList = this.tabList.filter((item) => !pathList.includes(item.fullPath));
},
+
+ /**
+ * Set tab's title
+ */
+ async setTabTitle(title: string, route: RouteLocationNormalized) {
+ const findTab = this.getTabList.find((item) => item === route);
+ if (findTab) {
+ findTab.meta.title = title;
+ await this.updateCacheTab();
+ }
+ },
},
});
diff --git a/src/views/demo/feat/tabs/index.vue b/src/views/demo/feat/tabs/index.vue
index 8c50a23..3a837c1 100644
--- a/src/views/demo/feat/tabs/index.vue
+++ b/src/views/demo/feat/tabs/index.vue
@@ -1,7 +1,11 @@
<template>
<PageWrapper title="标签页操作示例">
<CollapseContainer title="在下面输入框输入文本,切换后回来内容会保存">
- <a-input placeholder="请输入" />
+ <a-alert banner message="该操作不会影响页面标题，仅修改Tab标题" />
+ <template class="mt-2 flex flex-grow-0">
+ <a-button class="mr-2" @click="setTabTitle" type="primary"> 设置Tab标题 </a-button>
+ <a-input placeholder="请输入" v-model:value="title" class="mr-4 w-12" />
+ </template>
</CollapseContainer>
<CollapseContainer class="mt-4" title="标签页操作">
@@ -15,18 +19,28 @@
</PageWrapper>
</template>
<script lang="ts">
- import { defineComponent } from 'vue';
+ import { defineComponent, ref } from 'vue';
import { CollapseContainer } from '/@/components/Container/index';
import { useTabs } from '/@/hooks/web/useTabs';
import { PageWrapper } from '/@/components/Page';
- import { Input } from 'ant-design-vue';
+ import { Input, Alert } from 'ant-design-vue';
+ import { useMessage } from '/@/hooks/web/useMessage';
export default defineComponent({
name: 'TabsDemo',
- components: { CollapseContainer, PageWrapper, [Input.name]: Input },
+ components: { CollapseContainer, PageWrapper, [Input.name]: Input, [Alert.name]: Alert },
setup() {
- const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage } = useTabs();
-
+ const title = ref<string>('');
+ const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage, setTitle } =
+ useTabs();
+ const { createMessage } = useMessage();
+ function setTabTitle() {
+ if (title.value) {
+ setTitle(title.value);
+ } else {
+ createMessage.error('请输入要设置的Tab标题！');
+ }
+ }
return {
closeAll,
closeLeft,
@@ -34,6 +48,8 @@
closeOther,
closeCurrent,
refreshPage,
+ setTabTitle,
+ title,
};
},
});
--
libgit2 0.23.3