[new feature] Tab: add ellipsis prop (#2299)

packages/tab/en-US.md

@@ -160,6 +160,7 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
 | offset-top | Offset top when use sticky mode | `Number` | `0` |
 | swipeable | Whether to switch tabs with swipe gestrue in the content | `Boolean` | `false` |
 | animated | Whether to change tabs with animation | `Boolean` | `false` |
+| ellipsis | Whether to ellipsis too long title | `Boolean` | `true` |
 
 ### Tab API
 

packages/tab/zh-CN.md

@@ -164,6 +164,7 @@ export default {
 | offset-top | 粘性定位布局下与顶部的最小距离，单位 px | `Number` | `0` | 1.1.15 |
 | swipe-threshold | 滚动阈值，标签数量超过多少个可滚动 | `Number` | `4` | - |
 | animated | 是否开启切换标签内容时的转场动画 | `Boolean` | `false` | 1.4.5 |
+| ellipsis | 是否省略过长的标题文字 | `Boolean` | `true` | 1.5.0 |
 
 ### Tab API
 

packages/tabs/index.less

@@ -50,6 +50,10 @@
     &--scrollable {
       .van-tab {
         flex: 0 0 22%;
+
+        &--complete {
+          flex: 1 0 auto;
+        }
       }
 
       .van-tabs__nav {

packages/tabs/index.vue

@@ -24,14 +24,15 @@
           class="van-tab"
           :class="{
             'van-tab--active': index === curActive,
-            'van-tab--disabled': tab.disabled
+            'van-tab--disabled': tab.disabled,
+            'van-tab--complete': !ellipsis
           }"
           :style="getTabStyle(tab, index)"
           @click="onClick(index)"
         >
           <span
             ref="title"
-            class="van-ellipsis"
+            :class="{ 'van-ellipsis': ellipsis }"
           >
             {{ tab.title }}
           </span>
@@ -75,6 +76,10 @@ export default create({
     animated: Boolean,
     offsetTop: Number,
     swipeable: Boolean,
+    ellipsis: {
+      type: Boolean,
+      default: true
+    },
     lineWidth: {
       type: Number,
       default: null
@@ -115,7 +120,7 @@ export default create({
   computed: {
     // whether the nav is scrollable
     scrollable() {
-      return this.tabs.length > this.swipeThreshold;
+      return this.tabs.length > this.swipeThreshold || !this.ellipsis;
     },
 
     wrapStyle() {
@@ -423,7 +428,7 @@ export default create({
         }
       }
 
-      if (this.scrollable) {
+      if (this.scrollable && this.ellipsis) {
         style.flexBasis = 88 / (this.swipeThreshold) + '%';
       }