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

[bugfix] Tab: title slot render (#1212)

Browse Source
This commit is contained in:
neverland 2018-05-31 17:58:59 +08:00 committed by GitHub
parent 3fa49cdd3e
commit 9b01710556
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 82 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/tab/index.vue
View File

@ -1,6 +1,9 @@
<template> <template>
<div :class="b('pane')" v-show="isSelected"> <div :class="b('pane')" v-show="isSelected">
<slot v-if="inited" /> <slot v-if="inited" />
<div v-if="$slots.title" ref="title">
<slot name="title" />
</div>
</div> </div>
</template> </template>
@ -45,6 +48,12 @@ export default create({
this.parent.tabs.push(this); this.parent.tabs.push(this);
}, },
mounted() {
if (this.$slots.title) {
this.parent.renderTitle(this.$refs.title, this.index);
}
},
destroyed() { destroyed() {
this.parent.tabs.splice(this.index, 1); this.parent.tabs.splice(this.index, 1);
} }

82
packages/tab/test/__snapshots__/demo.spec.js.snap
View File

@ -12,15 +12,19 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tab__pane"> <div class="van-tab__pane">
<!----> <!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!----> <!---->
</div> </div>
<div class="van-tab__pane" style="display:none;"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!---->
</div> </div>
<div class="van-tab__pane" style="display:none;"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div> </div>
</div> </div>
</div> </div>
@ -35,27 +39,35 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tab__pane"> <div class="van-tab__pane">
<!----> <!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!----> <!---->
</div> </div>
<div class="van-tab__pane" style="display:none;"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!----> <!---->
</div> </div>
<div class="van-tab__pane" style="display:none;"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!----> <!---->
</div> </div>
<div class="van-tab__pane" style="display:none;"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!---->
</div> </div>
<div class="van-tab__pane" style="display:none;"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div> </div>
</div> </div>
</div> </div>
@ -70,15 +82,19 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tab__pane"> <div class="van-tab__pane">
<!----> <!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!----> <!---->
</div> </div>
<div class="van-tab__pane" style="display:none;"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!---->
</div> </div>
<div class="van-tab__pane" style="display:none;"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div> </div>
</div> </div>
</div> </div>
@ -93,15 +109,19 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tab__pane"> <div class="van-tab__pane">
<!----> <!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!----> <!---->
</div> </div>
<div class="van-tab__pane" style="display:none;"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!---->
</div> </div>
<div class="van-tab__pane" style="display:none;"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div> </div>
</div> </div>
</div> </div>
@ -116,15 +136,19 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tab__pane"> <div class="van-tab__pane">
<!----> <!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!----> <!---->
</div> </div>
<div class="van-tab__pane" style="display:none;"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!---->
</div> </div>
<div class="van-tab__pane" style="display:none;"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div> </div>
</div> </div>
</div> </div>
@ -139,15 +163,19 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tab__pane"> <div class="van-tab__pane">
<!----> <!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!----> <!---->
</div> </div>
<div class="van-tab__pane" style="display:none;"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!---->
</div> </div>
<div class="van-tab__pane" style="display:none;"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div> </div>
</div> </div>
</div> </div>
@ -162,9 +190,23 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tab__pane"> <div class="van-tab__pane">
<!----> <!---->
<div>
<div>
<i class="van-icon van-icon-more-o" style="color:undefined;">
<!---->
</i>选项
</div>
</div>
</div> </div>
<div class="van-tab__pane" style="display:none;"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<div>
<div>
<i class="van-icon van-icon-more-o" style="color:undefined;">
<!---->
</i>选项
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -179,15 +221,19 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tab__pane"> <div class="van-tab__pane">
<!----> <!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!----> <!---->
</div> </div>
<div class="van-tab__pane" style="display:none;"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!---->
</div> </div>
<div class="van-tab__pane" style="display:none;"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div> </div>
</div> </div>
</div> </div>

16
packages/tabs/index.vue
View File

@ -19,8 +19,7 @@
}" }"
@click="onClick(index)" @click="onClick(index)"
> >
<van-node v-if="tab.$slots.title" :node="tab.$slots.title" /> <span class="van-ellipsis" ref="title">{{ tab.title }}</span>
<span class="van-ellipsis" v-else>{{ tab.title }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -34,7 +33,6 @@
import create from '../utils/create'; import create from '../utils/create';
import { raf } from '../utils/raf'; import { raf } from '../utils/raf';
import { on, off } from '../utils/event'; import { on, off } from '../utils/event';
import VanNode from '../utils/node';
import scrollUtils from '../utils/scroll'; import scrollUtils from '../utils/scroll';
import Touch from '../mixins/touch'; import Touch from '../mixins/touch';
@ -43,10 +41,6 @@ export default create({
mixins: [Touch], mixins: [Touch],
components: {
VanNode
},
model: { model: {
prop: 'active' prop: 'active'
}, },
@ -261,6 +255,14 @@ export default create({
} }
}; };
animate(); animate();
},
// render title slot of child tab
renderTitle(el, index) {
this.$nextTick(() => {
const title = this.$refs.title[index];
title.parentNode.replaceChild(el, title);
});
} }
} }
}); });

13
packages/utils/node.js
View File

@ -1,13 +0,0 @@
/**
* VNode helper
*/
export default {
name: 'van-node',
functional: true,
props: {
node: Array
},
render(h, ctx) {
return ctx.props.node;
}
};