From f9fa2fc1c328632c4fff4193960c9987d0622cb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E6=95=8F?= <cookfront@gmail.com>
Date: Thu, 12 Oct 2017 22:52:13 -0500
Subject: [PATCH] [new feature]: tabs component add swipeThreshold prop (#206)

---
 docs/examples-docs/zh-CN/tab.md |  8 ++++----
 packages/tabs/index.vue         | 10 +++++++---
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/docs/examples-docs/zh-CN/tab.md b/docs/examples-docs/zh-CN/tab.md
index f10d38f1e..7f70f9f25 100644
--- a/docs/examples-docs/zh-CN/tab.md
+++ b/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>
diff --git a/packages/tabs/index.vue b/packages/tabs/index.vue
index dcd27dd65..35801c65d 100644
--- a/packages/tabs/index.vue
+++ b/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();
         }
       });