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

[Improvement] Collapse: lazy render (#1513)

Browse Source
This commit is contained in:
neverland 2018-07-20 07:32:29 +08:00 committed by GitHub
parent 191f983e19
commit 93fbf8d417
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/collapse-item/index.vue
View File

@ -8,7 +8,7 @@
<cell :class="b('title')" is-link @click="onClick"> <cell :class="b('title')" is-link @click="onClick">
<slot name="title">{{ title }}</slot> <slot name="title">{{ title }}</slot>
</cell> </cell>
<div v-show="show" ref="wrapper" :class="b('wrapper')" @transitionend="onTransitionEnd"> <div v-if="inited" v-show="show" ref="wrapper" :class="b('wrapper')" @transitionend="onTransitionEnd">
<div ref="content" :class="b('content')"> <div ref="content" :class="b('content')">
<slot /> <slot />
</div> </div>
@ -33,7 +33,8 @@ export default create({
data() { data() {
return { return {
show: null show: null,
inited: null
}; };
}, },
@ -66,6 +67,7 @@ export default create({
this.findParent('van-collapse'); this.findParent('van-collapse');
this.items.push(this); this.items.push(this);
this.show = this.expanded; this.show = this.expanded;
this.inited = this.expanded;
}, },
destroyed() { destroyed() {
@ -80,6 +82,7 @@ export default create({
if (expanded) { if (expanded) {
this.show = true; this.show = true;
this.inited = true;
} }
this.$nextTick(() => { this.$nextTick(() => {

26
packages/collapse/test/__snapshots__/demo.spec.js.snap
View File

@ -26,9 +26,7 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</i> </i>
</div> </div>
<div class="van-collapse-item__wrapper" style="display:none;"> <!---->
<div class="van-collapse-item__content">网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失</div>
</div>
</div> </div>
<div class="van-collapse-item van-hairline--top"> <div class="van-collapse-item van-hairline--top">
<div class="van-cell van-cell--clickable van-hairline van-collapse-item__title"> <div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
@ -39,9 +37,7 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</i> </i>
</div> </div>
<div class="van-collapse-item__wrapper" style="display:none;"> <!---->
<div class="van-collapse-item__content">线上拓客，随时预约，贴心顺手的开单收银</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -69,9 +65,7 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</i> </i>
</div> </div>
<div class="van-collapse-item__wrapper" style="display:none;"> <!---->
<div class="van-collapse-item__content">网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失</div>
</div>
</div> </div>
<div class="van-collapse-item van-hairline--top"> <div class="van-collapse-item van-hairline--top">
<div class="van-cell van-cell--clickable van-hairline van-collapse-item__title"> <div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
@ -82,9 +76,7 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</i> </i>
</div> </div>
<div class="van-collapse-item__wrapper" style="display:none;"> <!---->
<div class="van-collapse-item__content">线上拓客，随时预约，贴心顺手的开单收银</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -105,11 +97,7 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</i> </i>
</div> </div>
<div class="van-collapse-item__wrapper" style="display:none;"> <!---->
<div class="van-collapse-item__content">
提供多样店铺模板，快速搭建网上商城
</div>
</div>
</div> </div>
<div class="van-collapse-item van-hairline--top"> <div class="van-collapse-item van-hairline--top">
<div class="van-cell van-cell--clickable van-hairline van-collapse-item__title"> <div class="van-cell van-cell--clickable van-hairline van-collapse-item__title">
@ -120,9 +108,7 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</i> </i>
</div> </div>
<div class="van-collapse-item__wrapper" style="display:none;"> <!---->
<div class="van-collapse-item__content">网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失</div>
</div>
</div> </div>
</div> </div>
</div> </div>