From edccdaf335769ab0187edadb8e612fe2a7534836 Mon Sep 17 00:00:00 2001
From: Tyh2001 <1469442737@qq.com>
Date: Thu, 27 Jul 2023 20:39:48 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=20tabs=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../fighting-design/tabs-item/src/tabs-item.vue   |  5 ++---
 packages/fighting-design/tabs/src/tabs.vue        | 12 +++++++++++-
 start/src/App.vue                                 | 15 ++++++++++-----
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/packages/fighting-design/tabs-item/src/tabs-item.vue b/packages/fighting-design/tabs-item/src/tabs-item.vue
index 478b2169d8..eeeb733c23 100644
--- a/packages/fighting-design/tabs-item/src/tabs-item.vue
+++ b/packages/fighting-design/tabs-item/src/tabs-item.vue
@@ -7,8 +7,7 @@
     getCurrentInstance,
     ref,
     onMounted,
-    reactive,
-    toRef
+    reactive
   } from 'vue'
   import type { ComponentInternalInstance } from 'vue'
 
@@ -28,7 +27,7 @@
   const options = reactive({
     activeName,
     uid: instance.uid,
-    label: toRef(prop, 'label')
+    label: prop.label
   })
 
   /** 该组件是否显示 */
diff --git a/packages/fighting-design/tabs/src/tabs.vue b/packages/fighting-design/tabs/src/tabs.vue
index f260f8b56c..e504db7b9e 100644
--- a/packages/fighting-design/tabs/src/tabs.vue
+++ b/packages/fighting-design/tabs/src/tabs.vue
@@ -84,6 +84,17 @@
         label: item.label
       } as const
     })
+
+    if (modelValue.value) {
+      activeName.value = modelValue.value
+      return
+    }
+
+    if (children.value && children.value.length) {
+      if (children.value[0].name) {
+        activeName.value = children.value[0].name
+      }
+    }
   }
 
   /** 将信息传递给子组件 */
@@ -104,7 +115,6 @@
 </script>
 
 <template>
-  {{ activeName }}
   <div role="tab" class="f-tabs">
     <!-- 标签列表 -->
     <div class="f-tabs__navs">
diff --git a/start/src/App.vue b/start/src/App.vue
index b8a9436a9f..cacde9b7f5 100644
--- a/start/src/App.vue
+++ b/start/src/App.vue
@@ -1,19 +1,24 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  const act = ref('2344')
+</script>
 
 <template>
-  <f-tabs>
+  {{ act }}
+  <f-tabs v-model="act">
     <f-tabs-item label="如烟">
       <p>七岁的那一年，抓住那只蝉，以为能抓住夏天；</p>
       <p>十七岁的那年，吻过他的脸，就以为和他能永远。</p>
     </f-tabs-item>
-    <f-tabs-item label="盛夏光年">
+    <f-tabs-item label="盛夏光年" name="222">
       <p>长大 难道是人必经的溃烂。</p>
     </f-tabs-item>
-    <f-tabs-item label="我心中尚未崩坏的地方">
+    <f-tabs-item label="我心中尚未崩坏的地方" name="333">
       <p>就算会有一天，没人与我合唱，至少在我的心中，还有个尚未崩坏的地方。</p>
     </f-tabs-item>
 
-    <f-tabs-item label="555">
+    <f-tabs-item label="555" name="54353">
       <p>打扫打扫打扫</p>
     </f-tabs-item>
   </f-tabs>