feat(tabs): props add size

src/packages/__VUE/tabs/demo.vue

@@ -35,6 +35,22 @@
     <nut-tabs style="height: 300px" v-model="state.tab6value" type="smile" title-scroll direction="vertical">
       <nut-tabpane v-for="item in state.list5" :title="'Tab ' + item"> Tab {{ item }} </nut-tabpane>
     </nut-tabs>
+    <h2>标签栏字体尺寸 large normal small </h2>
+    <nut-tabs v-model="state.tab1value" size="large">
+      <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
+      <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
+      <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+    </nut-tabs>
+    <nut-tabs v-model="state.tab1value" size="normal">
+      <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
+      <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
+      <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+    </nut-tabs>
+    <nut-tabs v-model="state.tab1value" size="small">
+      <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
+      <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
+      <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+    </nut-tabs>
     <h2>自定义标签栏</h2>
     <nut-tabs v-model="state.tab7value">
       <template v-slot:titles>

src/packages/__VUE/tabs/doc.md

@@ -150,6 +150,25 @@ export default {
 </nut-tabs>
 ```
 
+### 标签栏字体尺寸 large normal small
+``` html
+<nut-tabs v-model="state.tab1value" size="large">
+  <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
+  <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
+  <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+</nut-tabs>
+<nut-tabs v-model="state.tab1value" size="normal">
+  <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
+  <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
+  <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+</nut-tabs>
+<nut-tabs v-model="state.tab1value" size="small">
+  <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
+  <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
+  <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+</nut-tabs>
+```
+
 ### 自定义标签栏
 ``` html
 <nut-tabs v-model="state.tab7value">
@@ -170,17 +189,18 @@ export default {
 
 ### Tabs Props
 
-| 参数          | 说明                                     | 类型          | 默认值     |
-|---------------|------------------------------------------|---------------|------------|
-| v-model       | 绑定当前选中标签的标识符                 | number,string | 0          |
-| color         | 标签选中色                               | string        | #1a1a1a    |
-| background    | 标签栏背景颜色                           | string        | #f5f5f5    |
-| direction     | 使用横纵方向 可选值 horizontal、vertical | string        | horizontal |
-| type          | 选中底部展示样式 可选值 line、smile      | string        | line       |
-| title-scroll  | 标签栏是否可以滚动                       | boolean       | false      |
-| ellipsis      | 是否省略过长的标题文字                   | boolean       | true       |
-| animated-time | 切换动画时长,单位 ms 0代表无动画         | number,string | 300        |
-| title-gutter  | 标签间隙                                 | number,string | 0          |
+| 参数          | 说明                                          | 类型          | 默认值     |
+|---------------|-----------------------------------------------|---------------|------------|
+| v-model       | 绑定当前选中标签的标识符                      | number,string | 0          |
+| color         | 标签选中色                                    | string        | #1a1a1a    |
+| background    | 标签栏背景颜色                                | string        | #f5f5f5    |
+| direction     | 使用横纵方向 可选值 horizontal、vertical      | string        | horizontal |
+| type          | 选中底部展示样式 可选值 line、smile           | string        | line       |
+| title-scroll  | 标签栏是否可以滚动                            | boolean       | false      |
+| ellipsis      | 是否省略过长的标题文字                        | boolean       | true       |
+| animated-time | 切换动画时长,单位 ms 0 代表无动画              | number,string | 300        |
+| title-gutter  | 标签间隙                                      | number,string | 0          |
+| size`v3.1.13`          | 标签栏字体尺寸大小 可选值  large normal small | string        | normal     |
 
 ## Tabs Slots
 

src/packages/__VUE/tabs/index.scss

@@ -66,6 +66,22 @@
     user-select: none;
     background: $tabs-titles-background-color;
     border-radius: $tabs-titles-border-radius;
+    flex-shrink: 0;
+    &.large {
+      .nut-tabs__titles-item {
+        font-size: $tabs-titles-item-large-font-size;
+      }
+    }
+    &.normal {
+      .nut-tabs__titles-item {
+        font-size: $tabs-titles-item-font-size;
+      }
+    }
+    &.small {
+      .nut-tabs__titles-item {
+        font-size: $tabs-titles-item-small-font-size;
+      }
+    }
     &::-webkit-scrollbar {
       display: none;
       width: 0;

src/packages/__VUE/tabs/index.taro.vue

@@ -1,6 +1,10 @@
 <template>
   <view class="nut-tabs" :class="[direction]">
-    <view class="nut-tabs__titles" :class="{ [type]: type, scrollable: titleScroll }" :style="tabsNavStyle">
+    <view
+      class="nut-tabs__titles"
+      :class="{ [type]: type, scrollable: titleScroll, [size]: size }"
+      :style="tabsNavStyle"
+    >
       <slot v-if="$slots.titles" name="titles"></slot>
       <template v-else>
         <view
@@ -30,7 +34,7 @@
 </template>
 <script lang="ts">
 import { pxCheck } from '../../utils/pxCheck';
-import { onMounted, provide, VNode, ref, Ref, computed, onActivated, watch } from 'vue';
+import { onMounted, provide, VNode, ref, Ref, computed, onActivated, watch, PropType } from 'vue';
 import { createComponent } from '../../utils/create';
 const { create } = createComponent('tabs');
 class Title {
@@ -40,6 +44,7 @@ class Title {
   disabled: boolean = false;
   constructor() {}
 }
+export type TabsSize = 'large' | 'normal' | 'small';
 export default create({
   props: {
     modelValue: {
@@ -54,6 +59,10 @@ export default create({
       type: String,
       default: 'horizontal' //vertical
     },
+    size: {
+      type: String as PropType<TabsSize>,
+      default: 'normal'
+    },
     type: {
       type: String,
       default: 'line' //card、line、smile

src/packages/__VUE/tabs/index.vue

@@ -1,6 +1,10 @@
 <template>
   <view class="nut-tabs" :class="[direction]">
-    <view class="nut-tabs__titles" :class="{ [type]: type, scrollable: titleScroll }" :style="tabsNavStyle">
+    <view
+      class="nut-tabs__titles"
+      :class="{ [type]: type, scrollable: titleScroll, [size]: size }"
+      :style="tabsNavStyle"
+    >
       <slot v-if="$slots.titles" name="titles"></slot>
       <template v-else>
         <view
@@ -30,7 +34,7 @@
 </template>
 <script lang="ts">
 import { pxCheck } from '@/packages/utils/pxCheck';
-import { onMounted, provide, VNode, ref, Ref, computed, onActivated, watch } from 'vue';
+import { onMounted, provide, VNode, ref, Ref, computed, onActivated, watch, PropType } from 'vue';
 import { createComponent } from '../../utils/create';
 const { create } = createComponent('tabs');
 class Title {
@@ -40,6 +44,7 @@ class Title {
   disabled: boolean = false;
   constructor() {}
 }
+export type TabsSize = 'large' | 'normal' | 'small';
 export default create({
   props: {
     modelValue: {
@@ -54,6 +59,10 @@ export default create({
       type: String,
       default: 'horizontal' //vertical
     },
+    size: {
+      type: String as PropType<TabsSize>,
+      default: 'normal'
+    },
     type: {
       type: String,
       default: 'line' //card、line、smile

src/packages/styles/variables.scss

@@ -353,7 +353,10 @@ $pagination-prev-next-padding: 0 11px !default;
 // tabs
 $tabs-tab-smile-color: $primary-color !default;
 $tabs-titles-border-radius: 0 !default;
+$tabs-titles-item-large-font-size: $font-size-3 !default;
 $tabs-titles-item-font-size: $font-size-2 !default;
+$tabs-titles-item-small-font-size: $font-size-1 !default;
+
 $tabs-titles-item-color: $title-color !default;
 $tabs-titles-background-color: $help-color !default;
 $tabs-horizontal-tab-line-color: linear-gradient(90deg, #f5503a 0%, #fad1cb 100%) !default;

src/sites/mobile-taro/vue/src/nav/pages/tabs/index.vue

@@ -35,6 +35,22 @@
     <nut-tabs style="height: 300px" v-model="state.tab6value" type="smile" title-scroll direction="vertical">
       <nut-tabpane v-for="item in state.list5" :title="'Tab ' + item"> Tab {{ item }} </nut-tabpane>
     </nut-tabs>
+    <h2>标签栏字体尺寸 large normal small </h2>
+    <nut-tabs v-model="state.tab1value" size="large">
+      <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
+      <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
+      <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+    </nut-tabs>
+    <nut-tabs v-model="state.tab1value" size="normal">
+      <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
+      <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
+      <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+    </nut-tabs>
+    <nut-tabs v-model="state.tab1value" size="small">
+      <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
+      <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
+      <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+    </nut-tabs>
     <h2>自定义标签栏</h2>
     <nut-tabs v-model="state.tab7value">
       <template v-slot:titles>