blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

perf(Tab): skip rendering empty pane (#7238)

Browse Source
This commit is contained in:
neverland 2020-09-23 18:00:26 +08:00 committed by GitHub
parent 17099d3ac1
commit 68d47fe16a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/tab/index.js
View File

@ -55,9 +55,15 @@ export default createComponent({
render(h) {
const { slots, parent, isActive } = this;
const shouldRender = this.inited || parent.scrollspy || !parent.lazyRender;
const slotContent = slots();
if (!slotContent) {
return;
}
const show = parent.scrollspy || isActive;
const Content = shouldRender ? slots() : h();
const shouldRender = this.inited || parent.scrollspy || !parent.lazyRender;
const Content = shouldRender ? slotContent : h();
if (parent.animated) {
return (

16
src/tab/test/__snapshots__/index.spec.js.snap
View File

@ -202,6 +202,22 @@ exports[`name prop 1`] = `
</div>
`;
exports[`render empty tab 1`] = `
<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 class="van-tabs__line"></div>
</div>
</div>
<div class="van-tabs__content">
<!---->
<!---->
</div>
</div>
`;
exports[`render nav-left & nav-right slot 1`] = `
<div class="van-tabs van-tabs--line">
<div>

13
src/tab/test/index.spec.js
View File

@ -410,3 +410,16 @@ test('before-change prop', async () => {
expect(onChange).toHaveBeenCalledTimes(2);
expect(onChange).toHaveBeenLastCalledWith(4, 'title5');
});
test('render empty tab', async () => {
const wrapper = mount({
template: `
<van-tabs>
<van-tab title="title1" />
<van-tab title="title2" />
</van-tabs>
`,
});
expect(wrapper).toMatchSnapshot();
});