feat: 完善 tabs 组件

FightingDesign · Jul 28, 2023 · d953cfb · d953cfb
1 parent 829e393
commit d953cfb
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 14 deletions.
diff --git a/packages/fighting-design/tabs/src/tabs.vue b/packages/fighting-design/tabs/src/tabs.vue
@@ -138,20 +138,32 @@
 
 <template>
   <div role="tab" :class="classList" :style="styleList">
-    <!-- 标签列表 -->
-    <div class="f-tabs__navs">
-      <div
-        v-for="(item, index) in children"
-        :key="index"
-        :class="['f-tabs__nav-item', { 'f-tabs__nav-active': item.name === activeName }]"
-        @[trigger]="changeNavs(item.name)"
-      >
-        {{ item.label }}
+    <!-- 头部内容 -->
+    <div class="f-tabs__head">
+      <!-- 前缀插槽 -->
+      <slot v-if="$slots.prefix" name="prefix" />
+
+      <!-- 标签列表 -->
+      <div class="f-tabs__navs">
+        <div
+          v-for="(item, index) in children"
+          :key="index"
+          :class="[
+            'f-tabs__nav-item',
+            { 'f-tabs__nav-active': item.name === activeName }
+          ]"
+          @[trigger]="changeNavs(item.name)"
+        >
+          {{ item.label }}
+        </div>
       </div>
+
+      <!-- 后缀插槽 -->
+      <slot v-if="$slots.suffix" name="suffix" />
     </div>
 
     <!-- 主要展示的内容 -->
-    <div class="f-tabs__content">
+    <div class="f-tabs__body">
       <slot />
     </div>
   </div>

diff --git a/packages/fighting-theme/src/tabs.scss b/packages/fighting-theme/src/tabs.scss
@@ -2,6 +2,17 @@
   display: flex;
   flex-direction: column;
 
+  &__head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    column-gap: 13px;
+
+    .f-tabs__navs {
+      width: 100%;
+    }
+  } 
+
   // 菜单栏
   // 线性类型
   &__line {
@@ -130,7 +141,7 @@
   }
 
   // 主要展示的内容
-  &__content {
+  &__body {
     flex: 1;
   }
 }
diff --git a/start/src/App.vue b/start/src/App.vue
@@ -8,11 +8,16 @@
   {{ act }}
   <f-tabs
     v-model="act"
-    position="left"
-    type="segment"
-    justify-content="flex-end"
+    position="top"
     trigger="click"
   >
+    <template #prefix>
+      <f-button type="primary">前缀</f-button>
+    </template>
+    <template #suffix>
+      <f-button type="primary">后缀</f-button>
+    </template>
+
     <f-tabs-item label="如烟">
       <p>七岁的那一年，抓住那只蝉，以为能抓住夏天；</p>
       <!-- <p>十七岁的那年，吻过他的脸，就以为和他能永远。</p> -->