feat(Tabs): add rendered prop (#5315)

.github/workflows/test.yml

@@ -1,4 +1,4 @@
-name: Node CI
+name: CI
 
 on: [push, pull_request]
 

src/tab/README.md

@@ -223,12 +223,13 @@ In scrollspy mode, the list of content will be tiled
 
 ### Tabs Events
 
-| Event | Description | Arguments |
+| Event | Description | Arguments | Version |
-|------|------|------|
+|------|------|------|------|
-| click | Triggered when click tab | name：name of current tab，title: tab title |
+| click | Triggered when click tab | name，title | - |
-| change | Triggered when active tab changed | name：name of current tab，title: tab title |
+| change | Triggered when active tab changed | name，title | - |
-| disabled | Triggered when click disabled tab | name：name of current tab, title: tab title |
+| disabled | Triggered when click disabled tab | name，title | - |
-| scroll | Triggered when tab scroll in sticky mode | object: { scrollTop, isFixed } |
+| rendered | Triggered when content first rendered in lazy-render mode | name，title | 2.3.0 |
+| scroll | Triggered when tab scroll in sticky mode | object: { scrollTop, isFixed } | - |
 
 ### Tabs Methods
 

src/tab/README.zh-CN.md

@@ -208,7 +208,7 @@ export default {
 | ellipsis | 是否省略过长的标题文字 | *boolean* | `true` | - |
 | sticky | 是否使用粘性定位布局 | *boolean* | `false` | - |
 | swipeable | 是否开启手势滑动切换 | *boolean* | `false` | - |
-| lazy-render | 是否开启标签页内容延迟渲染 | *boolean* | `true` | - |
+| lazy-render | 是否开启延迟渲染（首次切换到标签时才触发内容渲染） | *boolean* | `true` | - |
 | scrollspy | 是否开启滚动导航 | *boolean* | `false` | 2.3.0 |
 
 ### Tab Props
@@ -227,12 +227,13 @@ export default {
 
 ### Tabs Events
 
-| 事件名 | 说明 | 回调参数 |
+| 事件名 | 说明 | 回调参数 | 版本 |
-|------|------|------|
+|------|------|------|------|
-| click | 点击标签时触发 | name：标签标识符，title：标题 |
+| click | 点击标签时触发 | name：标识符，title：标题 | - |
-| change | 当前激活的标签改变时触发 | name：标签标识符，title：标题 |
+| change | 当前激活的标签改变时触发 | name：标识符，title：标题 | - |
-| disabled | 点击被禁用的标签时触发 | name：标签标识符，title：标题 |
+| disabled | 点击被禁用的标签时触发 | name：标识符，title：标题 | - |
-| scroll | 滚动时触发，仅在 sticky 模式下生效 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } |
+| rendered | 标签内容首次渲染时触发（仅在开启延迟渲染后触发） | name：标识符，title：标题 | 2.3.0 |
+| scroll | 滚动时触发，仅在 sticky 模式下生效 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } | - |
 
 ### Tabs 方法
 

src/tab/demo/index.vue

@@ -162,7 +162,7 @@ export default {
 @import '../../style/var';
 
 .demo-tab {
-  margin-bottom: 300px;
+  margin-bottom: 80vh;
 
   .van-tab .van-icon {
     margin-right: 5px;

src/tab/index.js

@@ -41,6 +41,12 @@ export default createComponent({
 
     title() {
       this.parent.setLine();
+    },
+
+    inited(val) {
+      if (this.parent.lazyRender && val) {
+        this.parent.$emit('rendered', this.computedName, this.title);
+      }
     }
   },
 

src/tab/test/index.spec.js

@@ -293,3 +293,49 @@ test('scrollspy', async () => {
   expect(wrapper).toMatchSnapshot();
   expect(onChange).toHaveBeenCalledWith('c', 'title3');
 });
+
+test('rendered event', () => {
+  const onRendered = jest.fn();
+
+  const wrapper = mount({
+    template: `
+      <van-tabs v-model="active" @rendered="onRendered">
+        <van-tab name="a" title="title1">Text</van-tab>
+        <van-tab name="b" title="title2">Title2</van-tab>
+      </van-tabs>
+    `,
+    data() {
+      return {
+        active: 'a'
+      };
+    },
+    methods: {
+      onRendered
+    }
+  });
+
+  expect(onRendered).toHaveBeenCalledWith('a', 'title1');
+
+  const tabs = wrapper.findAll('.van-tab');
+  tabs.at(1).trigger('click');
+  tabs.at(0).trigger('click');
+  expect(onRendered).toHaveBeenCalledTimes(2);
+});
+
+test('should not trigger rendered event when disable lazy-render', () => {
+  const onRendered = jest.fn();
+
+  mount({
+    template: `
+      <van-tabs :lazy-render="false" @rendered="onRendered">
+        <van-tab>Text</van-tab>
+        <van-tab>Title2</van-tab>
+      </van-tabs>
+    `,
+    methods: {
+      onRendered
+    }
+  });
+
+  expect(onRendered).toHaveBeenCalledTimes(0);
+});