修改 tabs

InfernalAzazel · Nov 26, 2024 · 39857fa · 39857fa
1 parent 5a7ae90
commit 39857fa
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/docs/cn/other/components/DemoProTabs.vue b/docs/cn/other/components/DemoProTabs.vue
@@ -52,7 +52,7 @@ function handleDropdownSelect(key: string) {
 </script>
 
 <template>
-  <ProTabs v-model="tabs"  @select="handleTabSelect" >
+  <ProTabs v-model="tabs"  @change-select="handleTabSelect" >
     <template #toolbar>
       <n-dropdown trigger="hover" :options="dropdownOptions" @select="handleDropdownSelect">
         <Icon icon="ant-design:appstore-outlined" height="24" width="24" />

diff --git a/docs/cn/other/tabs.md b/docs/cn/other/tabs.md
@@ -21,6 +21,12 @@
 
 ## **事件 (Emits)**
 
-| 事件名        | 参数               | 描述                   |
-|------------|------------------|----------------------|
-| **select** | `(path: string)` | 当选择标签页时触发，返回所选标签页的路径 |
+| 事件名              | 参数               | 描述                   |
+|------------------|------------------|----------------------|
+| **changeSelect** | `(path: string)` | 当选择标签页时触发，返回所选标签页的路径 |
+
+## **方法 (Expose)**
+
+| 方法名             | 参数                        | 描述   |
+|-----------------|---------------------------|------|
+| **setSelected** | `(index: number) => void` | 设置选中 |
diff --git a/packages/k-naiveui-pro/src/components/ProTabs.vue b/packages/k-naiveui-pro/src/components/ProTabs.vue
@@ -22,7 +22,7 @@ const props = withDefaults(defineProps<ProTabsProps>(), {
 const modelValue = defineModel<ProTabData[]>({default: []});
 
 const emit = defineEmits<{
-  (e: 'select', path: string): void; // 选项卡切换事件
+  (e: 'changeSelect', path: string): void; // 选项卡切换事件
 }>();
 // 当前选中的选项卡索引
 const selected = ref(0);
@@ -39,6 +39,7 @@ function handleRemove(index: number) {
   modelValue.value.splice(index, 1); // 移除选项卡
   if (selected.value >= modelValue.value.length) {
     selected.value = modelValue.value.length - 1; // 更新选中状态
+    emit('changeSelect', modelValue.value[selected.value]?.path || '');
   }
 }
 
@@ -54,14 +55,14 @@ const horizontalScroll = (event: WheelEvent) => {
 // 选项卡切换逻辑
 function handleSelect(index: number) {
   selected.value = index; // 更新当前选中的索引
-  emit('select', modelValue.value[index].path || ''); // 触发选中事件
+  emit('changeSelect', modelValue.value[index].path || '');
 }
 
 // 设置选中的选项卡
 function setSelected(index: number) {
   if (index >= 0 && index < modelValue.value.length) {
     selected.value = index; // 更新选中索引
-    emit('select', modelValue.value[index]?.path || ''); // 触发选中事件
+    emit('changeSelect', modelValue.value[index]?.path || '');
   }
 }