From d89d67e43453796bcc288145e929b6c955ce7638 Mon Sep 17 00:00:00 2001
From: Hooray Hu <304327508@qq.com>
Date: Tue, 30 Jan 2024 01:16:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=A0=87=E7=AD=BE=E9=A1=B5?=
 =?UTF-8?q?=E6=BC=94=E7=A4=BA=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/modules/tab.example.ts | 33 ++++++++++++++
 src/router/routes.ts              |  2 +
 src/views/tab_example/index.vue   | 75 +++++++++++++++++++++++++++++++
 3 files changed, 110 insertions(+)
 create mode 100755 src/router/modules/tab.example.ts
 create mode 100755 src/views/tab_example/index.vue

diff --git a/src/router/modules/tab.example.ts b/src/router/modules/tab.example.ts
new file mode 100755
index 00000000..3fd73f70
--- /dev/null
+++ b/src/router/modules/tab.example.ts
@@ -0,0 +1,33 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+function Layout() {
+  return import('@/layouts/index.vue')
+}
+
+const routes: RouteRecordRaw = {
+  path: '/tab_example',
+  component: Layout,
+  redirect: '/tab_example/index',
+  name: 'tabExample',
+  meta: {
+    title: '标签栏',
+    i18n: 'route.tabbar',
+    icon: 'i-ic:round-tab',
+  },
+  children: [
+    {
+      path: 'index',
+      name: 'tabExampleIndex',
+      component: () => import('@/views/tab_example/index.vue'),
+      meta: {
+        title: '标签栏演示',
+        i18n: 'route.tabbar',
+        sidebar: false,
+        breadcrumb: false,
+        activeMenu: '/tab_example',
+      },
+    },
+  ],
+}
+
+export default routes
diff --git a/src/router/routes.ts b/src/router/routes.ts
index cc475e88..0da1acee 100755
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -4,6 +4,7 @@ import type { RouteRecordRaw } from 'vue-router'
 import MultilevelMenuExample from './modules/multilevel.menu.example'
 import BreadcrumbExample from './modules/breadcrumb.example'
 import KeepAliveExample from './modules/keep.alive.example'
+import TabExample from './modules/tab.example'
 import ComponentExample from './modules/component.example'
 import IconExample from './modules/icon.example'
 import FeatureExample from './modules/feature.example'
@@ -96,6 +97,7 @@ const asyncRoutes: Route.recordMainRaw[] = [
       MultilevelMenuExample,
       BreadcrumbExample,
       KeepAliveExample,
+      TabExample,
       ComponentExample,
       IconExample,
       FeatureExample,
diff --git a/src/views/tab_example/index.vue b/src/views/tab_example/index.vue
new file mode 100755
index 00000000..7bb90f98
--- /dev/null
+++ b/src/views/tab_example/index.vue
@@ -0,0 +1,75 @@
+<route lang="yaml">
+meta:
+  enabled: false
+</route>
+
+<script setup lang="ts">
+import useSettingsStore from '@/store/modules/settings'
+
+const settingsStore = useSettingsStore()
+
+const tabbar = useTabbar()
+
+function open() {
+  tabbar.open(settingsStore.settings.home.fullPath)
+}
+function close() {
+  tabbar.close(settingsStore.settings.home.fullPath)
+}
+function closeById() {
+  tabbar.closeById()
+}
+function closeById2() {
+  tabbar.closeById(settingsStore.settings.home.fullPath)
+}
+function closeOtherSide() {
+  tabbar.closeOtherSide()
+}
+function closeLeftSide() {
+  tabbar.closeLeftSide()
+}
+function closeRightSide() {
+  tabbar.closeRightSide()
+}
+</script>
+
+<template>
+  <div>
+    <PageHeader title="标签栏" content="功能类似于浏览器的标签栏，支持右键操作" />
+    <PageMain title="打开新标签页">
+      <p>如果目标地址已在标签栏存在，则直接切换并访问。如果目标地址在标签栏不存在，则会在当前标签页后面插入新的标签页。</p>
+      <ElButton @click="open">
+        打开主页
+      </ElButton>
+    </PageMain>
+    <PageMain title="关闭当前标签页并跳转">
+      <p>关闭当前标签页，同时跳转到新页面。</p>
+      <ElButton @click="close">
+        关闭当前标签页，并跳转到主页
+      </ElButton>
+    </PageMain>
+    <PageMain title="关闭指定标签页">
+      <p>如果当前只有一个标签时，则无法关闭。</p>
+      <p>如果关闭的是当前标签页，则会在关闭后跳转至紧邻的标签页。</p>
+      <p>如果关闭的目标页面不存在，则无法关闭。</p>
+      <ElButton @click="closeById">
+        关闭当前页面
+      </ElButton>
+      <ElButton @click="closeById2">
+        关闭主页
+      </ElButton>
+    </PageMain>
+    <PageMain title="关闭非当前标签页">
+      <p>除了提供关闭非当前标签页的 API 外，还提供了校验 API 。</p>
+      <ElButton :disabled="!tabbar.checkCloseOtherSide()" @click="closeOtherSide">
+        关闭两侧标签页
+      </ElButton>
+      <ElButton :disabled="!tabbar.checkCloseLeftSide()" @click="closeLeftSide">
+        关闭左侧标签页
+      </ElButton>
+      <ElButton :disabled="!tabbar.checkCloseRightSide()" @click="closeRightSide">
+        关闭右侧标签页
+      </ElButton>
+    </PageMain>
+  </div>
+</template>