diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 43183677c8c..c15d713d431 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -1,4 +1,4 @@ -name: Node CI +name: CI on: [push, pull_request] diff --git a/src/tab/README.md b/src/tab/README.md index 617182bb931..f5cfbab8b70 100644 --- a/src/tab/README.md +++ b/src/tab/README.md @@ -223,12 +223,13 @@ In scrollspy mode, the list of content will be tiled ### Tabs Events -| Event | Description | Arguments | -|------|------|------| -| click | Triggered when click tab | name:name of current tab,title: tab title | -| change | Triggered when active tab changed | name:name of current tab,title: tab title | -| disabled | Triggered when click disabled tab | name:name of current tab, title: tab title | -| scroll | Triggered when tab scroll in sticky mode | object: { scrollTop, isFixed } | +| Event | Description | Arguments | Version | +|------|------|------|------| +| click | Triggered when click tab | name,title | - | +| change | Triggered when active tab changed | name,title | - | +| disabled | Triggered when click disabled tab | name,title | - | +| 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 diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md index 28a41e45395..3e0a8e2070b 100644 --- a/src/tab/README.zh-CN.md +++ b/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:标题 | -| change | 当前激活的标签改变时触发 | name:标签标识符,title:标题 | -| disabled | 点击被禁用的标签时触发 | name:标签标识符,title:标题 | -| scroll | 滚动时触发,仅在 sticky 模式下生效 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } | +| 事件名 | 说明 | 回调参数 | 版本 | +|------|------|------|------| +| click | 点击标签时触发 | name:标识符,title:标题 | - | +| change | 当前激活的标签改变时触发 | name:标识符,title:标题 | - | +| disabled | 点击被禁用的标签时触发 | name:标识符,title:标题 | - | +| rendered | 标签内容首次渲染时触发(仅在开启延迟渲染后触发) | name:标识符,title:标题 | 2.3.0 | +| scroll | 滚动时触发,仅在 sticky 模式下生效 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } | - | ### Tabs 方法 diff --git a/src/tab/demo/index.vue b/src/tab/demo/index.vue index 73a03ca3db4..6ef7472ec33 100644 --- a/src/tab/demo/index.vue +++ b/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; diff --git a/src/tab/index.js b/src/tab/index.js index 94aea7e100b..45856531d21 100644 --- a/src/tab/index.js +++ b/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); + } } }, diff --git a/src/tab/test/index.spec.js b/src/tab/test/index.spec.js index a7471ebf1e3..3af15024d66 100644 --- a/src/tab/test/index.spec.js +++ b/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: ` + + Text + Title2 + + `, + 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: ` + + Text + Title2 + + `, + methods: { + onRendered + } + }); + + expect(onRendered).toHaveBeenCalledTimes(0); +});