[new feature]: tabs component add swipeThreshold prop (#206)

docs/examples-docs/zh-CN/tab.md

@@ -89,7 +89,7 @@ Vue.component(Tabs.name, Tabs);
 ```
 :::
 
-### 设置切换tab的动画时间
+#### 设置切换tab的动画时间
 
 通过设置`duration`来指定时间，默认为0.3s，只接受`Number`类型参数。
 
@@ -103,11 +103,11 @@ Vue.component(Tabs.name, Tabs);
 ```
 :::
 
-#### 多于4个tab时
+#### 横向滚动tab
 
-多于4个tab时，可以横向滚动tab。
+默认情况下多于4个tab时，可以横向滚动tab。可以通过设置`swipeThreshold`这个阙值，多于这个阙值时，tab就会支持横向滚动。
 
-:::demo 多于4个tab时
+:::demo 横向滚动tab
 ```html
 <van-tabs>
   <van-tab title="选项一">内容一</van-tab>

packages/tabs/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="van-tabs" :class="[`van-tabs--${type}`]">
-    <div class="van-tabs__nav-wrap" v-if="type === 'line' && tabs.length > 4">
+    <div class="van-tabs__nav-wrap" v-if="type === 'line' && tabs.length > swipeThreshold">
       <div class="van-tabs__swipe" ref="swipe">
         <div class="van-tabs__nav van-tabs__nav--line">
           <div class="van-tabs__nav-bar" :style="navBarStyle"></div>
@@ -62,6 +62,10 @@
       duration: {
         type: Number,
         default: 0.3
+      },
+      swipeThreshold: {
+        type: Number,
+        default: 4
       }
     },
 
@@ -81,7 +85,7 @@
 
       curActive() {
         /* istanbul ignore else */
-        if (this.tabs.length > 4) {
+        if (this.tabs.length > this.swipeThreshold) {
           this.doOnValueChange();
         }
       }
@@ -127,7 +131,7 @@
         this.isReady = true;
         this.initEvents();
   
-        if (this.tabs.length > 4) {
+        if (this.tabs.length > this.swipeThreshold) {
           this.doOnValueChange();
         }
       });