[Improvement] Tab: add line-width prop (#988)

docs/markdown/en-US/tab.md

@@ -141,6 +141,7 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
 | v-model | Index of active tab | `String` `Number` | `0` | - |
 | type | There are two style tabs, set this attribute to change tab style | `String` | `line` | `card` |
 | duration | Toggle tab's animation time | `Number` | `0.2` | - | - |
+| line-width | Width of tab line (px) | `Number` | Equal to current tab width | - |
 | swipe-threshold | Set swipe tabs threshold | `Number` | `4` | - | - |
 | sticky | Whether to use sticky mode | `Boolean` | `false` | - |
 | swipeable | Whether to switch tabs with swipe gestrue in the content | `Boolean` | `false` | - |

docs/markdown/zh-CN/tab.md

@@ -143,6 +143,7 @@ export default {
 | v-model | 当前激活的 tab | `String` `Number` | `0` | - |
 | type | Tab 样式类型 | `String` | `line` | `card` |
 | duration | 切换 tab 的动画时间 | `Number` | `0.2` | - |
+| line-width | 底部条宽度（px） | `Number` | 与当前 Tab 等宽 | - |
 | swipe-threshold | 滚动阀值，设置 Tab 超过多少个可滚动 | `Number` | `4` | - |
 | sticky | 是否使用粘性定位布局 | `Boolean` | `false` | - |
 | swipeable | 是否可以滑动内容切换 | `Boolean` | `false` | - |

packages/tabs/index.vue

@@ -8,7 +8,7 @@
       ]"
     >
       <div :class="b('nav', [type])" ref="nav">
-        <div v-if="type === 'line'" :class="b('nav-bar')" :style="navBarStyle" />
+        <div v-if="type === 'line'" :class="b('line')" :style="lineStyle" />
         <div
           v-for="(tab, index) in tabs"
           ref="tabs"
@@ -53,6 +53,8 @@ export default create({
 
   props: {
     sticky: Boolean,
+    lineWidth: Number,
+    swipeable: Boolean,
     active: {
       type: [Number, String],
       default: 0
@@ -68,8 +70,7 @@ export default create({
     swipeThreshold: {
       type: Number,
       default: 4
-    },
-    swipeable: Boolean
+    }
   },
 
   data() {
@@ -77,7 +78,7 @@ export default create({
       tabs: [],
       position: 'content-top',
       curActive: 0,
-      navBarStyle: {}
+      lineStyle: {}
     };
   },
 
@@ -97,12 +98,12 @@ export default create({
 
     tabs(tabs) {
       this.correctActive(this.curActive || this.active);
-      this.setNavBar();
+      this.setLine();
     },
 
     curActive() {
       this.scrollIntoView();
-      this.setNavBar();
+      this.setLine();
 
       // scroll to correct position
       if (this.position === 'page-top' || this.position === 'content-bottom') {
@@ -117,7 +118,7 @@ export default create({
 
   mounted() {
     this.correctActive(this.active);
-    this.setNavBar();
+    this.setLine();
 
     this.$nextTick(() => {
       if (this.sticky) {
@@ -153,12 +154,12 @@ export default create({
 
     // whether to bind content swipe listener
     swipeableHandler(init) {
-      const swipeableEl = this.$refs.content;
-
-      (init ? on : off)(swipeableEl, 'touchstart', this.touchStart);
-      (init ? on : off)(swipeableEl, 'touchmove', this.touchMove);
-      (init ? on : off)(swipeableEl, 'touchend', this.onTouchEnd);
-      (init ? on : off)(swipeableEl, 'touchcancel', this.onTouchEnd);
+      const { content } = this.$refs;
+      const action = init ? on : off;
+      action(content, 'touchstart', this.touchStart);
+      action(content, 'touchmove', this.touchMove);
+      action(content, 'touchend', this.onTouchEnd);
+      action(content, 'touchcancel', this.onTouchEnd);
     },
 
     // watch swipe touch end
@@ -192,16 +193,19 @@ export default create({
     },
 
     // update nav bar style
-    setNavBar() {
+    setLine() {
       this.$nextTick(() => {
         if (!this.$refs.tabs) {
           return;
         }
 
         const tab = this.$refs.tabs[this.curActive];
-        this.navBarStyle = {
-          width: `${tab.offsetWidth || 0}px`,
-          transform: `translate(${tab.offsetLeft || 0}px, 0)`,
+        const width = this.lineWidth || tab.offsetWidth;
+        const left = tab.offsetLeft + (tab.offsetWidth - width) / 2;
+
+        this.lineStyle = {
+          width: `${width}px`,
+          transform: `translateX(${left}px)`,
           transitionDuration: `${this.duration}s`
         };
       });

packages/vant-css/src/tab.css

@@ -76,7 +76,7 @@ $van-tabs-card-height: 30px;
     }
   }
 
-  &__nav-bar {
+  &__line {
     z-index: 1;
     left: 0;
     bottom: 15px;