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

[new feature] Tabs: add lazy-render props (#2800)

Browse Source
This commit is contained in:
neverland 2019-02-19 19:39:09 +08:00 committed by GitHub
parent 98e7d23eef
commit bff9c9d6d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 68 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/tab/index.js
View File

@ -58,9 +58,11 @@ export default sfc({
render(h) {
const { slots } = this;
const shouldRender = this.inited || !this.parent.lazyRender;
return (
<div vShow={this.selected || this.parent.animated} class={bem('pane')}>
{this.inited ? slots() : h()}
{shouldRender ? slots() : h()}
{slots('title') && <div ref="title">{slots('title')}</div>}
</div>
);

45
packages/tab/test/__snapshots__/index.spec.js.snap
View File

@ -94,6 +94,51 @@ exports[`click to switch tab 2`] = `
</div>
`;
exports[`lazy render 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
<div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
<div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
<div class="van-tab"><span class="van-ellipsis"></span></div>
<div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
</div>
</div>
<div class="van-tabs__content">
<div class="van-tab__pane" style="">Text</div>
<div class="van-tab__pane" style="display: none;">
<!---->
<div><span>title2</span></div>
</div>
<div class="van-tab__pane" style="display: none;">
<!---->
</div>
</div>
</div>
`;
exports[`lazy render 2`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div 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-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
<div class="van-tab">
<div><span>title2</span></div>
</div>
<div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
</div>
</div>
<div class="van-tabs__content">
<div class="van-tab__pane" style="">Text</div>
<div class="van-tab__pane" style="display: none;">
Text
</div>
<div class="van-tab__pane" style="display: none;">Text</div>
</div>
</div>
`;
exports[`swipe to switch tab 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">

17
packages/tab/test/index.spec.js
View File

@ -11,6 +11,7 @@ function createWrapper(options) {
:swipeable="swipeable"
:sticky="sticky"
:line-width="lineWidth"
:lazy-render="lazyRender"
>
<tab :title="title1">Text</tab>
<tab>
@ -31,7 +32,8 @@ function createWrapper(options) {
type: 'line',
swipeable: true,
sticky: true,
lineWidth: 2
lineWidth: 2,
lazyRender: true
};
},
...options
@ -97,3 +99,16 @@ test('change tabs data', async () => {
await later();
expect(wrapper).toMatchSnapshot();
});
test('lazy render', async () => {
const wrapper = createWrapper();
expect(wrapper).toMatchSnapshot();
wrapper.setData({
lazyRender: false
});
await later();
expect(wrapper).toMatchSnapshot();
});

4
packages/tabs/index.js
View File

@ -27,6 +27,10 @@ export default sfc({
type: Boolean,
default: true
},
lazyRender: {
type: Boolean,
default: true
},
lineWidth: {
type: Number,
default: null