feat(Tabs): adjust default line-width to 40px (#3518)

packages/tab/README.md

@@ -193,7 +193,7 @@ Page({
 | type | 样式风格，可选值为`card` | _string_ | `line` | - |
 | border | 是否展示外边框，仅在`line`风格下生效 | _boolean_ | `true` | - |
 | duration | 动画时间 (单位秒) | _number_ | `0.3` | - |
-| line-width | 底部条宽度 (px) | _string \| number_ | 与当前标签等宽 | - |
+| line-width | 底部条宽度 (px) | _string \| number_ | `40px` | - |
 | line-height | 底部条高度 (px) | _string \| number_ | `3px` | - |
 | swipe-threshold | 滚动阈值，设置标签数量超过多少个可滚动 | _number_ | `5` | - |
 | animated | 是否使用动画切换 Tabs | _boolean_ | `false` | - |

packages/tabs/index.ts

@@ -46,7 +46,7 @@ VantComponent({
     swipeable: Boolean,
     lineWidth: {
       type: [String, Number],
-      value: -1,
+      value: 40,
       observer: 'setLine',
     },
     lineHeight: {
@@ -245,7 +245,6 @@ VantComponent({
           if (rect == null) {
             return;
           }
-          const width = lineWidth !== -1 ? lineWidth : rect.width / 2;
           const height =
             lineHeight !== -1
               ? `height: ${addUnit(lineHeight)}; border-radius: ${addUnit(
@@ -257,7 +256,7 @@ VantComponent({
             .slice(0, currentIndex)
             .reduce((prev, curr) => prev + curr.width, 0);
 
-          left += (rect.width - width) / 2;
+          left += (rect.width - lineWidth) / 2;
 
           const transition = skipTransition
             ? ''
@@ -266,7 +265,7 @@ VantComponent({
           this.setData({
             lineStyle: `
             ${height}
-            width: ${addUnit(width)};
+            width: ${addUnit(lineWidth)};
             background-color: ${color};
             -webkit-transform: translateX(${left}px);
             transform: translateX(${left}px);