87 lines
2.7 KiB
Vue
87 lines
2.7 KiB
Vue
|
<script lang="ts" setup>
|
|||
|
|
import { useRouter } from 'vue-router';
|
|||
|
|
|
|||
|
|
import { useTabs } from '@vben/hooks';
|
|||
|
|
|
|||
|
|
import { Button } from 'ant-design-vue';
|
|||
|
|
|
|||
|
|
defineOptions({ name: 'FeatureTabsDemo' });
|
|||
|
|
|
|||
|
|
const router = useRouter();
|
|||
|
|
// const newTabTitle = ref('');
|
|||
|
|
const {
|
|||
|
|
closeAllTabs,
|
|||
|
|
closeCurrentTab,
|
|||
|
|
closeLeftTabs,
|
|||
|
|
closeOtherTabs,
|
|||
|
|
closeRightTabs,
|
|||
|
|
closeTabByKey,
|
|||
|
|
refreshTab,
|
|||
|
|
} = useTabs();
|
|||
|
|
|
|||
|
|
function openTab() {
|
|||
|
|
// 这里就是路由跳转，也可以用path
|
|||
|
|
router.push({ name: 'VbenAbout' });
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="p-5">
|
|||
|
|
<div class="card-box p-5">
|
|||
|
|
<h1 class="text-xl font-semibold">标签页</h1>
|
|||
|
|
<div class="text-foreground/80 mt-2">用于需要操作标签页的场景</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card-box mt-5 p-5">
|
|||
|
|
<div class="text-lg font-semibold">打开/关闭标签页</div>
|
|||
|
|
<div class="text-foreground/80 my-3">
|
|||
|
|
如果标签页存在，直接跳转切换。如果标签页不存在，则打开新的标签页。
|
|||
|
|
</div>
|
|||
|
|
<div class="flex flex-wrap gap-3">
|
|||
|
|
<Button type="primary" @click="openTab"> 打开 "关于" 标签页 </Button>
|
|||
|
|
<Button type="primary" @click="closeTabByKey('/vben-admin/about')">
|
|||
|
|
关闭 "关于" 标签页
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card-box mt-5 p-5">
|
|||
|
|
<div class="text-lg font-semibold">标签页操作</div>
|
|||
|
|
<div class="text-foreground/80 my-3">用于动态控制标签页的各种操作</div>
|
|||
|
|
<div class="flex flex-wrap gap-3">
|
|||
|
|
<Button type="primary" @click="closeCurrentTab()">
|
|||
|
|
关闭当前标签页
|
|||
|
|
</Button>
|
|||
|
|
<Button type="primary" @click="closeLeftTabs()">
|
|||
|
|
关闭左侧标签页
|
|||
|
|
</Button>
|
|||
|
|
<Button type="primary" @click="closeRightTabs()">
|
|||
|
|
关闭右侧标签页
|
|||
|
|
</Button>
|
|||
|
|
<Button type="primary" @click="closeAllTabs()"> 打开所有标签页 </Button>
|
|||
|
|
<Button type="primary" @click="closeOtherTabs()">
|
|||
|
|
关闭其他标签页
|
|||
|
|
</Button>
|
|||
|
|
<Button type="primary" @click="refreshTab()"> 刷新当前标签页 </Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card-box mt-5 p-5">
|
|||
|
|
<div class="text-lg font-semibold">动态标题</div>
|
|||
|
|
<div class="text-foreground/80 my-3">
|
|||
|
|
该操作不会影响页面标题，仅修改Tab标题
|
|||
|
|
</div>
|
|||
|
|
<!-- <div class="flex flex-wrap items-center gap-3">
|
|||
|
|
<Input
|
|||
|
|
v-model="newTabTitle"
|
|||
|
|
class="w-30"
|
|||
|
|
placeholder="请输入新的标题"
|
|||
|
|
/>
|
|||
|
|
<Button type="primary" @click="closeCurrentTab()">
|
|||
|
|
关闭当前标签页 {{ newTabTitle }}
|
|||
|
|
</Button>
|
|||
|
|
</div> -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|