style: 优化 tabs 组件

FightingDesign · Jul 27, 2023 · edccdaf · edccdaf
1 parent bc1cc2d
commit edccdaf
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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>