diff --git a/packages/tab/README.md b/packages/tab/README.md index 99bd5e0d..46be91fa 100644 --- a/packages/tab/README.md +++ b/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` | - | diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts index a78a6eef..c753831f 100644 --- a/packages/tabs/index.ts +++ b/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);