Merge branch '2.x' into dev

src/tab/README.md

@@ -270,8 +270,8 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Tabs i
 
 | Name | Description | Attribute | Return value |
 | --- | --- | --- | --- |
-| resize | Resize Tabs when container element resized | - | void |
-| scrollTo `v2.9.3` | Go to specified tab in scrollspy mode | name | void |
+| resize | Resize Tabs when container element resized or visibility changed | - | - |
+| scrollTo `v2.9.3` | Go to specified tab in scrollspy mode | name | - |
 
 ### Tabs Slots
 

src/tab/README.zh-CN.md

@@ -277,8 +277,8 @@ export default {
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| resize | 外层元素大小变化后，可以调用此方法来触发重绘 | - | void |
-| scrollTo `v2.9.3` | 滚动到指定的标签页，在滚动导航模式下可用 | name: 标识符 | void |
+| resize | 外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘 | - | - |
+| scrollTo `v2.9.3` | 滚动到指定的标签页，在滚动导航模式下可用 | name: 标识符 | - |
 
 ### Tabs Slots
 
@@ -293,3 +293,30 @@ export default {
 | ------- | ---------- |
 | default | 标签页内容 |
 | title   | 自定义标题 |
+
+## 常见问题
+
+### 组件从隐藏状态切换到显示状态时，底部条位置错误？
+
+Tabs 组件在挂载时，会获取自身的宽度，并计算出底部条的位置。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法展示底部条位置。
+
+#### 解决方法
+
+方法一，如果是使用 `v-show` 来控制组件展示的，则替换为 `v-if` 即可解决此问题：
+
+```html
+<!-- Before -->
+<van-tabs v-show="show" />
+<!-- After -->
+<van-tabs v-if="show" />
+```
+
+方法二，调用组件的 resize 方法来主动触发重绘：
+
+```html
+<van-tabs v-show="show" ref="tabs" />
+```
+
+```js
+this.$refs.tabs.resize();
+```

src/tab/test/__snapshots__/index.legacy.js.snap

@@ -331,10 +331,10 @@ exports[`swipe to switch tab 2`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap">
     <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
-      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
+      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
+      <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
       <div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
-      <div class="van-tabs__line"></div>
+      <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
     </div>
   </div>
   <div class="van-tabs__content">
@@ -351,10 +351,10 @@ exports[`swipe to switch tab 3`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap">
     <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
-      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
+      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
+      <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
       <div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
-      <div class="van-tabs__line"></div>
+      <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
     </div>
   </div>
   <div class="van-tabs__content">

src/tab/test/index.legacy.js

@@ -61,12 +61,17 @@ test('swipe to switch tab', async () => {
   const onChange = jest.fn();
   const wrapper = mount({
     template: `
-      <van-tabs swipeable @change="onChange">
+      <van-tabs v-model="active" swipeable @change="onChange">
         <van-tab title="title1">Text</van-tab>
         <van-tab title="title2">Text</van-tab>
         <van-tab title="title3" disabled>Text</van-tab>
       </van-tabs>
     `,
+    data() {
+      return {
+        active: 0,
+      };
+    },
     methods: {
       onChange,
     },
@@ -174,7 +179,7 @@ test('name prop', async () => {
 
   const wrapper = mount({
     template: `
-      <van-tabs @click="onClick" @disabled="onDisabled" @change="onChange">
+      <van-tabs v-model="active" @click="onClick" @disabled="onDisabled" @change="onChange">
         <van-tab title="title1" name="a">Text</van-tab>
         <van-tab title="title2" name="b">Text</van-tab>
         <van-tab title="title3" name="c" disabled>Text</van-tab>
@@ -185,6 +190,11 @@ test('name prop', async () => {
       onChange,
       onDisabled,
     },
+    data() {
+      return {
+        active: 0,
+      };
+    },
   });
 
   await later();

src/tab/test/insert.legacy.js

@@ -27,9 +27,10 @@ test('insert tab dynamically', async () => {
 });
 
 test('insert tab with name dynamically', async () => {
+  const onChange = jest.fn();
   const wrapper = mount({
     template: `
-      <van-tabs v-model="active">
+      <van-tabs v-model="active" @change="onChange">
         <van-tab v-if="insert" title="1" name="bar">2</van-tab>
         <van-tab title="2" name="foo">1</van-tab>
       </van-tabs>
@@ -37,14 +38,18 @@ test('insert tab with name dynamically', async () => {
     data() {
       return {
         insert: false,
-        active: [{ name: 'foo', title: 'foo' }],
+        active: 'foo',
       };
     },
+    methods: {
+      onChange,
+    },
   });
 
   await later();
   wrapper.setData({ insert: true });
   expect(wrapper).toMatchSnapshot();
+  expect(onChange).toHaveBeenCalledTimes(0);
 });
 
 // this case will throw wierd error in index.spec.js