[new feature] Tab: add line height prop (#2357)

packages/tab/en-US.md

@@ -155,6 +155,7 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
 | type | Can be set to `line` `card` | `String` | `line` |
 | duration | Toggle tab's animation time | `Number` | `0.3` | - |
 | line-width | Width of tab line (px) | `Number` | Width of active tab |
+| line-height | Height of tab line (px) | `Number` | 3 |
 | swipe-threshold | Set swipe tabs threshold | `Number` | `4` | - |
 | sticky | Whether to use sticky mode | `Boolean` | `false` |
 | offset-top | Offset top when use sticky mode | `Number` | `0` |

packages/tab/zh-CN.md

@@ -159,6 +159,7 @@ export default {
 | type | 样式类型，可选值为`card` | `String` | `line` | - |
 | duration | 动画时间，单位秒 | `Number` | `0.3` | - |
 | line-width | 底部条宽度，单位 px | `Number` | - | 1.1.1 |
+| line-height | 底部条高度，单位 px | `Number` | 3 | 1.5.0 |
 | swipeable | 是否开启手势滑动切换 | `Boolean` | `false` | 1.0.0 |
 | sticky | 是否使用粘性定位布局 | `Boolean` | `false` | - |
 | offset-top | 粘性定位布局下与顶部的最小距离，单位 px | `Number` | `0` | 1.1.15 |

packages/tabs/index.less

@@ -112,9 +112,9 @@
     z-index: 1;
     left: 0;
     bottom: 15px;
-    height: 2px;
+    height: 3px;
     position: absolute;
-    border-radius: 2px;
+    border-radius: 3px;
     background-color: @red;
   }
 

packages/tabs/index.vue

@@ -85,6 +85,10 @@ export default create({
       type: Number,
       default: null
     },
+    lineHeight: {
+      type: Number,
+      default: null
+    },
     active: {
       type: [Number, String],
       default: 0
@@ -298,15 +302,24 @@ export default create({
         }
 
         const tab = tabs[this.curActive];
-        const width = this.isDef(this.lineWidth) ? this.lineWidth : (tab.offsetWidth / 2);
+        const { lineWidth, lineHeight } = this;
+        const width = this.isDef(lineWidth) ? lineWidth : (tab.offsetWidth / 2);
         const left = tab.offsetLeft + (tab.offsetWidth - width) / 2;
 
-        this.lineStyle = {
+        const lineStyle = {
           width: `${width}px`,
           backgroundColor: this.color,
           transform: `translateX(${left}px)`,
           transitionDuration: `${this.duration}s`
         };
+
+        if (this.isDef(lineHeight)) {
+          const height = `${lineHeight}px`;
+          lineStyle.height = height;
+          lineStyle.borderRadius = height;
+        }
+
+        this.lineStyle = lineStyle;
       });
     },