[improvement] Tab: support string type of line-width & line-height (#3514)

packages/index-bar/test/__snapshots__/demo.spec.js.snap

@@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
   <div class="van-tabs van-tabs--line">
     <div class="van-tabs__wrap van-hairline--top-bottom">
       <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-        <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
+        <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
         <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">基础用法</span></div>
         <div role="tab" class="van-tab"><span class="van-ellipsis">自定义索引列表</span></div>
       </div>

packages/list/test/__snapshots__/demo.spec.js.snap

@@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
   <div class="van-tabs van-tabs--line">
     <div class="van-tabs__wrap van-hairline--top-bottom">
       <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-        <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
+        <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
         <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">基础用法</span></div>
         <div role="tab" class="van-tab"><span class="van-ellipsis">错误提示</span></div>
       </div>

packages/tab/en-US.md

@@ -159,8 +159,8 @@ 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` | - |
 | background | Background color | `String` | `white` |
-| line-width | Width of tab line (px) | `Number` | Width of active tab |
+| line-width | Width of tab line | `Number | String` | Width of active tab |
-| line-height | Height of tab line (px) | `Number` | 3 |
+| line-height | Height of tab line | `Number | String` | `3px` |
 | color | Tab color | `String` | `#f44` |
 | title-active-color | Title active color | `String` | - |
 | title-inactive-color | Title inactive color | `String` | - |

packages/tab/test/__snapshots__/demo.spec.js.snap

@@ -6,7 +6,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
+          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
           <div role="tab" class="van-tab"><span class="van-ellipsis">标签 1</span></div>
           <div role="tab" class="van-tab"><span class="van-ellipsis">标签 2</span></div>
           <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 3</span></div>
@@ -33,7 +33,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-tabs__wrap--scrollable van-hairline--top-bottom">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
+          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
           <div role="tab" aria-selected="true" class="van-tab van-tab--active" style="flex-basis: 22%;"><span class="van-ellipsis">标签 1</span></div>
           <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 2</span></div>
           <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 3</span></div>
@@ -76,7 +76,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
+          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
           <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 1</span></div>
           <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">标签 2</span></div>
           <div role="tab" class="van-tab"><span class="van-ellipsis">标签 3</span></div>
@@ -121,7 +121,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
+          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
           <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 1</span></div>
           <div role="tab" class="van-tab"><span class="van-ellipsis">标签 2</span></div>
         </div>
@@ -140,7 +140,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
+          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
           <div role="tab" class="van-tab"><span class="van-ellipsis">标签 1</span></div>
           <div role="tab" class="van-tab"><span class="van-ellipsis">标签 2</span></div>
           <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 3</span></div>
@@ -167,7 +167,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
+          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
           <div role="tab" aria-selected="true" class="van-tab van-tab--active">
             <div>
               <div><i class="van-icon van-icon-more-o">
@@ -198,7 +198,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
+          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
           <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 1</span></div>
           <div role="tab" class="van-tab"><span class="van-ellipsis">标签 2</span></div>
           <div role="tab" class="van-tab"><span class="van-ellipsis">标签 3</span></div>
@@ -235,7 +235,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
+          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
           <div role="tab" class="van-tab"><span class="van-ellipsis">标签 1</span></div>
           <div role="tab" class="van-tab"><span class="van-ellipsis">标签 2</span></div>
           <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 3</span></div>

packages/tab/test/__snapshots__/index.spec.js.snap

@@ -62,7 +62,7 @@ exports[`click to switch tab 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
-      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
+      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(0px) translateX(-50%);"></div>
       <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
       <div role="tab" class="van-tab">
         <div><span>title2</span></div>
@@ -86,7 +86,7 @@ exports[`click to switch tab 2`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
-      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px); transition-duration: 0.3s;"></div>
+      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"></div>
       <div role="tab" class="van-tab"><span class="van-ellipsis">title1</span></div>
       <div role="tab" class="van-tab van-tab--active" aria-selected="true">
         <div><span>title2</span></div>
@@ -133,7 +133,7 @@ exports[`lazy render 2`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
-      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
+      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(0px) translateX(-50%);"></div>
       <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
       <div role="tab" class="van-tab">
         <div><span>title2</span></div>

packages/tab/test/index.spec.js

@@ -129,10 +129,10 @@ test('render nav-left & nav-right slot', async () => {
 });
 
 test('border props', async () => {
-  const wrapper = mount({
+  const wrapper = mount(Tabs, {
-    template: `
+    propsData: {
-      <van-tabs :border="false" />
+      border: false
-    `,
+    }
   });
 
   expect(wrapper).toMatchSnapshot();

packages/tab/zh-CN.md

@@ -161,8 +161,8 @@ export default {
 | type | 样式类型，可选值为`card` | `String` | `line` | - |
 | duration | 动画时间，单位秒 | `Number` | `0.3` | - |
 | background | 标签栏背景色 | `String` | `white` | 1.6.5 |
-| line-width | 底部条宽度，单位 px | `Number` | - | 1.1.1 |
+| line-width | 底部条宽度，默认单位 px | `Number | String` | `auto` | 1.1.1 |
-| line-height | 底部条高度，单位 px | `Number` | 3 | 1.5.0 |
+| line-height | 底部条高度，默认单位 px | `Number | String` | `3px` | 1.5.0 |
 | color | 标签主题色 | `String` | `#f44` | 1.2.0 |
 | title-active-color | 标题选中态颜色 | `String` | - | 1.6.5 |
 | title-inactive-color | 标题默认态颜色 | `String` | - | 1.6.5 |

packages/tabs/index.js

@@ -1,5 +1,5 @@
-import { use, isDef } from '../utils';
+import { use, isDef, suffixPx } from '../utils';
-import { raf } from '../utils/dom/raf';
+import { scrollLeftTo } from './utils';
 import { on, off } from '../utils/dom/event';
 import { TouchMixin } from '../mixins/touch';
 import { ParentMixin } from '../mixins/relation';
@@ -35,6 +35,8 @@ export default sfc({
     offsetTop: Number,
     swipeable: Boolean,
     background: String,
+    lineWidth: [Number, String],
+    lineHeight: [Number, String],
     titleActiveColor: String,
     titleInactiveColor: String,
     border: {
@@ -49,14 +51,6 @@ export default sfc({
       type: Boolean,
       default: true
     },
-    lineWidth: {
-      type: Number,
-      default: null
-    },
-    lineHeight: {
-      type: Number,
-      default: null
-    },
     active: {
       type: [Number, String],
       default: 0
@@ -240,12 +234,12 @@ export default sfc({
         const tab = tabs[this.curActive];
         const { lineWidth, lineHeight } = this;
         const width = isDef(lineWidth) ? lineWidth : tab.offsetWidth / 2;
-        const left = tab.offsetLeft + (tab.offsetWidth - width) / 2;
+        const left = tab.offsetLeft + tab.offsetWidth / 2;
 
         const lineStyle = {
-          width: `${width}px`,
+          width: suffixPx(width),
           backgroundColor: this.color,
-          transform: `translateX(${left}px)`
+          transform: `translateX(${left}px) translateX(-50%)`
         };
 
         if (shouldAnimate) {
@@ -253,7 +247,7 @@ export default sfc({
         }
 
         if (isDef(lineHeight)) {
-          const height = `${lineHeight}px`;
+          const height = suffixPx(lineHeight);
           lineStyle.height = height;
           lineStyle.borderRadius = height;
         }
@@ -314,29 +308,10 @@ export default sfc({
       }
 
       const { nav } = this.$refs;
-      const { scrollLeft, offsetWidth: navWidth } = nav;
+      const active = tabs[this.curActive];
-      const { offsetLeft, offsetWidth: tabWidth } = tabs[this.curActive];
+      const to = active.offsetLeft - (nav.offsetWidth - active.offsetWidth) / 2;
 
-      this.scrollTo(nav, scrollLeft, offsetLeft - (navWidth - tabWidth) / 2, immediate);
+      scrollLeftTo(nav, to, immediate ? 0 : this.duration);
-    },
-
-    // animate the scrollLeft of nav
-    scrollTo(el, from, to, immediate) {
-      if (immediate) {
-        el.scrollLeft += to - from;
-        return;
-      }
-
-      let count = 0;
-      const frames = Math.round((this.duration * 1000) / 16);
-      const animate = () => {
-        el.scrollLeft += (to - from) / frames;
-        /* istanbul ignore next */
-        if (++count < frames) {
-          raf(animate);
-        }
-      };
-      animate();
     },
 
     // render title slot of child tab

packages/tabs/utils.ts

@@ -0,0 +1,17 @@
+import { raf } from '../utils/dom/raf';
+
+export function scrollLeftTo(el: HTMLElement, to: number, duration: number) {
+  let count = 0;
+  const from = el.scrollLeft;
+  const frames = duration === 0 ? 1 : Math.round((duration * 1000) / 16);
+
+  function animate() {
+    el.scrollLeft += (to - from) / frames;
+
+    if (++count < frames) {
+      raf(animate);
+    }
+  }
+
+  animate();
+}

packages/utils/test/index.spec.js

@@ -93,6 +93,8 @@ test('is-mobile', () => {
 
 test('is-number', () => {
   expect(isNumber('1')).toBeTruthy();
+  expect(isNumber('1.2')).toBeTruthy();
+  expect(isNumber('1..2')).toBeFalsy();
   expect(isNumber('abc')).toBeFalsy();
   expect(isNumber('1b2')).toBeFalsy();
 });

packages/utils/validate/number.ts

@@ -1,3 +1,3 @@
 export function isNumber(value: string): boolean {
-  return /^\d+$/.test(value);
+  return /^\d+(\.\d+)?$/.test(value);
 }