mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[bugfix] Tab: should lazy render tab-pane
This commit is contained in:
parent
9a3634838b
commit
a85747a248
@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div :class="b('pane', { select: index === parent.curActive })">
|
||||
<slot />
|
||||
<div :class="b('pane')" v-show="isSelected">
|
||||
<keep-alive>
|
||||
<slot v-if="isSelected || slotInited" />
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -18,9 +20,27 @@ export default create({
|
||||
disabled: Boolean
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
slotInited: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
index() {
|
||||
return this.parent.tabs.indexOf(this);
|
||||
},
|
||||
|
||||
isSelected() {
|
||||
return this.index === this.parent.curActive;
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
'parent.curActive'() {
|
||||
if (this.isSelected) {
|
||||
this.slotInited = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -134,12 +134,4 @@ $van-tabs-card-height: 30px;
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&__pane {
|
||||
display: none;
|
||||
|
||||
&--select {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user