Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
zuiqiangwanggong
vue-vben-admin
提交
5ddccf6b
V
vue-vben-admin
项目概览
zuiqiangwanggong
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
未验证
提交
5ddccf6b
编写于
6月 01, 2021
作者:
N
Netfan
提交者:
GitHub
6月 01, 2021
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(tabs): add setTabTitle method (#680)
添加设置标签页标题的方法和演示
上级
644dbe31
变更
3
显示空白变更内容
内联
并排
Showing
3 changed file
with
43 addition
and
6 deletion
+43
-6
src/hooks/web/useTabs.ts
src/hooks/web/useTabs.ts
+10
-0
src/store/modules/multipleTab.ts
src/store/modules/multipleTab.ts
+11
-0
src/views/demo/feat/tabs/index.vue
src/views/demo/feat/tabs/index.vue
+22
-6
未找到文件。
src/hooks/web/useTabs.ts
浏览文件 @
5ddccf6b
...
...
@@ -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
),
};
}
src/store/modules/multipleTab.ts
浏览文件 @
5ddccf6b
...
...
@@ -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
();
}
},
},
});
...
...
src/views/demo/feat/tabs/index.vue
浏览文件 @
5ddccf6b
<
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
,
};
},
});
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录