修改 tabs

InfernalAzazel · Nov 26, 2024 · 10eb074 · 10eb074
1 parent 5632a91
commit 10eb074
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 33 deletions.
diff --git a/docs/cn/other/components/DemoProTabs.vue b/docs/cn/other/components/DemoProTabs.vue
@@ -4,28 +4,63 @@ title: 基础用法
 ---
 </docs>
 <script lang="ts" setup>
-import {ref} from "vue";
-import type { ProTabData } from 'k-naiveui-pro'
+import {ref, h} from "vue";
+import type { ProTabData } from 'k-naiveui-pro';
 import {createDiscreteApi} from "naive-ui";
+import { Icon } from '@iconify/vue';
 
 const { message} = createDiscreteApi(
     ['message'],
 )
 
 const tabs = ref<ProTabData[]>([
-  { icon: 'mdi:home', title: '首页', path: '/home' },
-  { icon: 'mdi:account', title: '我的账户', path: '/account' },
-  { icon: 'mdi:settings', title: '设置', path: '/settings' }
+  { title: '首页', path: '/home' },
+  { title: '我的账户', path: '/account' },
+  { title: '设置', path: '/settings' }
 ])
+// 下拉菜单选项
+
+// 定义下拉菜单选项
+const dropdownOptions = [
+  {
+    label: '刷新',
+    key: 'refresh',
+    icon: () =>
+        h(Icon, {
+          icon: 'carbon:renew',
+        }),
+  },
+  {
+    label: '关闭全部',
+    key: 'close-all',
+    icon: () =>
+        h(Icon, {
+          icon: 'carbon:close-outline',
+        }),
+  },
+];
 
 function handleTabSelect(path: string) {
   message.info(path)
 }
-
+function handleDropdownSelect(key: string) {
+  if (key === 'refresh') {
+    message.info(key)
+  } else if (key === 'close-all') {
+    tabs.value = tabs.value.slice(0, 1)
+    message.info(key)
+  }
+}
 </script>
 
 <template>
-  <ProTabs v-model="tabs" @select="handleTabSelect" />
+  <ProTabs v-model="tabs" borderStyle="bottom" @select="handleTabSelect" >
+    <template #toolbar>
+      <n-dropdown trigger="hover" :options="dropdownOptions" @select="handleDropdownSelect">
+        <Icon icon="ant-design:appstore-outlined" height="24" width="24" />
+      </n-dropdown>
+    </template>
+  </ProTabs>
 </template>
 
 <style scoped>

diff --git a/packages/k-naiveui-pro/src/components/ProTabs.vue b/packages/k-naiveui-pro/src/components/ProTabs.vue
@@ -1,26 +1,33 @@
-<script setup lang="ts">
-import {ref} from 'vue';
-import { Icon } from '@iconify/vue';
+<script lang="ts" setup>
+import {computed, ref} from 'vue';
+import {Icon} from '@iconify/vue';
 
 export interface ProTabData {
-  icon?: string; // 图标的名称
   title?: string; // 选项卡的标题
   path?: string; // 路由路径
 }
 
 export interface ProTabsProps {
-  storageKey?: string;
+  borderStyle?: 'all' | 'bottom';
 }
 
-defineOptions({ name: 'ProTabs', inheritAttrs: false });
+defineOptions({name: 'ProTabs', inheritAttrs: false});
+const props = withDefaults(defineProps<ProTabsProps>(), {
+  borderStyle: 'all', // 默认值为完整边框
+});
 
-const modelValue = defineModel<ProTabData[]>({ default: [] });
+const modelValue = defineModel<ProTabData[]>({default: []});
 const emit = defineEmits<{
   (e: 'select', path: string): void; // 选项卡切换事件
 }>();
 // 当前选中的选项卡索引
 const selected = ref(0);
-
+// 动态计算边框样式
+const borderClass = computed(() => {
+  return props.borderStyle === 'bottom'
+      ? 'border-b border-gray-300 dark:border-gray-700'
+      : 'border border-gray-300 dark:border-gray-700';
+});
 
 // 删除选项卡（第一个选项卡不可删除）
 function handleRemove(index: number) {
@@ -33,7 +40,7 @@ function handleRemove(index: number) {
 
 // 横向滚动逻辑
 const horizontalScroll = (event: WheelEvent) => {
-  const { deltaY } = event;
+  const {deltaY} = event;
   const proTabs = document.querySelector('.pro-tabs');
   if (proTabs) {
     proTabs.scrollLeft += deltaY; // 横向滚动
@@ -48,27 +55,37 @@ function handleSelect(index: number) {
 </script>
 
 <template>
-  <n-el
-      class="pro-tabs flex space-x-1 w-full h-[40px] px-[20px] overflow-x-auto overflow-x-hidden text-ellipsis whitespace-nowrap items-center scroll-smooth"
-      @wheel="horizontalScroll"
-  >
+  <n-el  class="flex flex-row pr-4" :class="borderClass" tag="div">
     <n-el
-        v-for="(tab, index) in modelValue"
-        :key="index"
-        class="flex flex-row cursor-pointer items-center pl-2 pr-2 space-x-2 border dark:border-gray-800 rounded hover:border-[var(--primary-color-hover)] hover:text-[var(--primary-color-hover)]"
-        :class="{ 'border-[var(--primary-color-pressed)] text-[var(--primary-color-pressed)]': selected === index }"
-        @click="() => handleSelect(index)"
+        class="pro-tabs flex space-x-1 w-full h-[40px] px-[20px] overflow-x-auto overflow-x-hidden text-ellipsis whitespace-nowrap items-center scroll-smooth"
+        tag="div"
         @wheel="horizontalScroll"
     >
-      <Icon v-if="tab.icon" :icon="tab.icon" />
-      <span>{{ tab.title }}</span>
-      <!-- 删除按钮（第一个选项卡禁用删除） -->
-      <Icon
-          v-if="index !== 0"
-      icon="carbon:close"
-      @click.stop="handleRemove(index)"
-      />
+      <n-el
+          v-for="(tab, index) in modelValue"
+          :key="index"
+          :class="[{ 'border-[var(--primary-color-pressed)] text-[var(--primary-color-pressed)]': selected === index }]"
+          class="flex flex-row cursor-pointer items-center pl-2 pr-2 space-x-2 border dark:border-gray-800 rounded hover:border-[var(--primary-color-hover)] hover:text-[var(--primary-color-hover)]"
+          tag="div"
+          @click="() => handleSelect(index)"
+          @wheel="horizontalScroll"
+      >
+        <!-- 显示选中状态的小圆点 -->
+        <span
+            v-if="selected === index"
+            class="w-2 h-2 bg-[var(--primary-color-pressed)] rounded-full"
+        ></span>
+        <span>{{ tab.title }}</span>
+        <!-- 删除按钮（第一个选项卡禁用删除） -->
+        <Icon
+            v-if="index !== 0"
+            icon="carbon:close"
+            @click.stop="handleRemove(index)"
+        />
+      </n-el>
     </n-el>
+    <div class="flex-grow"/>
+    <slot name="toolbar" />
   </n-el>
 </template>