useTagsView(2.1.0+)
操作标签页
useTagsView 位于 src/hooks/web/useTagsView.ts
用法
<script setup lang="ts">
<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { ElButton } from 'element-plus'
import { useTagsView } from '@/hooks/web/useTagsView'
import { useRouter } from 'vue-router'
const { push } = useRouter()
const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage, setTitle } =
useTagsView()
const closeAllTabs = () => {
closeAll(() => {
push('/dashboard/analysis')
})
}
const closeLeftTabs = () => {
closeLeft()
}
const closeRightTabs = () => {
closeRight()
}
const closeOtherTabs = () => {
closeOther()
}
const refresh = () => {
refreshPage()
}
const closeCurrentTab = () => {
closeCurrent(undefined, () => {
push('/dashboard/analysis')
})
}
const setTabTitle = () => {
setTitle(new Date().getTime().toString())
}
const setAnalysisTitle = () => {
setTitle(`分析页-${new Date().getTime().toString()}`, '/dashboard/analysis')
}
</script>
<template>
<ContentWrap title="useTagsView">
<ElButton type="primary" @click="closeAllTabs"> 关闭所有标签页 </ElButton>
<ElButton type="primary" @click="closeLeftTabs"> 关闭左侧标签页 </ElButton>
<ElButton type="primary" @click="closeRightTabs"> 关闭右侧标签页 </ElButton>
<ElButton type="primary" @click="closeOtherTabs"> 关闭其他标签页 </ElButton>
<ElButton type="primary" @click="closeCurrentTab"> 关闭当前标签页 </ElButton>
<ElButton type="primary" @click="refresh"> 刷新当前标签页 </ElButton>
<ElButton type="primary" @click="setTabTitle"> 修改当前标题 </ElButton>
<ElButton type="primary" @click="setAnalysisTitle"> 修改分析页标题 </ElButton>
</ContentWrap>
</template>
</script>
参数介绍
const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage, setTitle } = useTagsView()
closeAll
closeAll
用于关闭所有标签页
closeLeft
closeLeft
用于关闭当前左侧标签页
closeRight
closeRight
用于关闭当前右侧标签页
closeOther
closeOther
用于关闭除当前标签页外的所有标签页
closeCurrent
closeCurrent
用于关闭除当前标签页
refreshPage
refreshPage
用于刷新当前标签页
setTitle
setTitle(title: string, path: string)
用于设置某个标签页的标签,接收 标题和一个完整的path路径