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] Tab: jsx (#2659)

Browse Source
This commit is contained in:
neverland 2019-01-31 21:04:44 +08:00 committed by GitHub
parent 9183849e6a
commit 5b3992d4c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 93 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/coupon-list/test/__snapshots__/index.spec.js.snap
View File

@ -116,12 +116,8 @@ exports[`render coupon list 1`] = `
</div>
</div>
</div>
<!---->
</div>
<div class="van-tab__pane" style="display: none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display: none;"></div>
</div>
</div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠</span></button>
</div>

10
packages/list/test/__snapshots__/demo.spec.js.snap
View File

@ -9,14 +9,8 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<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>

37
packages/tab/index.vue → packages/tab/index.js
View File

@ -1,26 +1,10 @@
<template>
<div
v-show="isSelected || parent.animated"
:class="b('pane')"
>
<slot v-if="inited" />
<div
v-if="$slots.title"
ref="title"
>
<slot name="title" />
</div>
</div>
</template>
<script>
/* eslint-disable object-shorthand */
import create from '../utils/create';
import { use } from '../utils';
import findParent from '../mixins/find-parent';
export default create({
name: 'tab',
const [sfc, bem] = use('tab');
export default sfc({
mixins: [findParent],
props: {
@ -39,14 +23,14 @@ export default create({
return this.parent.tabs.indexOf(this);
},
isSelected() {
selected() {
return this.index === this.parent.curActive;
}
},
watch: {
'parent.curActive'() {
this.inited = this.inited || this.isSelected;
this.inited = this.inited || this.selected;
},
title() {
@ -70,6 +54,15 @@ export default create({
beforeDestroy() {
this.parent.tabs.splice(this.index, 1);
},
render(h) {
const slots = this.$slots;
return (
<div v-show={this.selected || this.parent.animated} class={bem('pane')}>
{this.inited && slots.default}
{slots.title && <div ref="title">{slots.title}</div>}
</div>
);
}
});
</script>

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

@ -10,22 +10,10 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<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 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>
@ -37,38 +25,14 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<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 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 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 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>
@ -80,18 +44,9 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<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 class="van-tab__pane" style="display:none;"></div>
<div class="van-tab__pane" style="display:none;"></div>
</div>
</div>
</div>
@ -103,19 +58,38 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<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>
</div>
</div>
<div>
<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:undefined;">
<div class="van-tabs__line" style="background-color:undefined;"></div>
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tabs__content">
<div class="van-tab__pane" style="display:none;"></div>
<div class="van-tab__pane" style="display:none;"></div>
</div>
</div>
</div>
<div>
<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:undefined;">
<div class="van-tabs__line" style="background-color:undefined;"></div>
</div>
</div>
<div class="van-tabs__content">
<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>
@ -127,53 +101,6 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-tabs__content">
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
</div>
</div>
</div>
<div>
<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:undefined;">
<div class="van-tabs__line" style="background-color:undefined;"></div>
</div>
</div>
<div class="van-tabs__content">
<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 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:undefined;">
<div class="van-tabs__line" style="background-color:undefined;"></div>
</div>
</div>
<div class="van-tabs__content">
<div class="van-tab__pane" style="display:none;">
<!---->
<div>
<div><i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
<!----></i>标签
@ -181,7 +108,6 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<div>
<div><i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
<!----></i>标签
@ -200,22 +126,10 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-tabs__content van-tabs__content--animated">
<div class="van-tabs__track" style="left:0%;transition-duration:0.3s;">
<div class="van-tab__pane">
<!---->
<!---->
</div>
<div class="van-tab__pane">
<!---->
<!---->
</div>
<div class="van-tab__pane">
<!---->
<!---->
</div>
<div class="van-tab__pane">
<!---->
<!---->
</div>
<div class="van-tab__pane"></div>
<div class="van-tab__pane"></div>
<div class="van-tab__pane"></div>
<div class="van-tab__pane"></div>
</div>
</div>
</div>
@ -228,22 +142,10 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<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 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>

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

@ -8,18 +8,11 @@ exports[`change tabs data 1`] = `
</div>
</div>
<div class="van-tabs__content">
<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><span>title2</span></div>
</div>
<div class="van-tab__pane" style="display: none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display: none;"></div>
</div>
</div>
`;
@ -37,16 +30,9 @@ exports[`change tabs data 2`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tab__pane" style="">Text
<!---->
</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="">Text</div>
<div class="van-tab__pane" style="display: none;"></div>
<div class="van-tab__pane" style="display: none;"></div>
</div>
</div>
`;
@ -64,16 +50,9 @@ exports[`click to switch tab 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tab__pane" style="">Text
<!---->
</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="">Text</div>
<div class="van-tab__pane" style="display: none;"></div>
<div class="van-tab__pane" style="display: none;"></div>
</div>
</div>
`;
@ -91,16 +70,9 @@ exports[`click to switch tab 2`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tab__pane" style="display: none;">Text
<!---->
</div>
<div class="van-tab__pane" style="">
Text
</div>
<div class="van-tab__pane" style="display: none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display: none;">Text</div>
<div class="van-tab__pane" style=""></div>
<div class="van-tab__pane" style="display: none;"></div>
</div>
</div>
`;
@ -118,16 +90,9 @@ exports[`swipe to switch tab 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tab__pane" style="">Text
<!---->
</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="">Text</div>
<div class="van-tab__pane" style="display: none;"></div>
<div class="van-tab__pane" style="display: none;"></div>
</div>
</div>
`;
@ -145,16 +110,9 @@ exports[`swipe to switch tab 2`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tab__pane" style="display: none;">Text
<!---->
</div>
<div class="van-tab__pane" style="">
Text
</div>
<div class="van-tab__pane" style="display: none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display: none;">Text</div>
<div class="van-tab__pane" style=""></div>
<div class="van-tab__pane" style="display: none;"></div>
</div>
</div>
`;
@ -172,16 +130,9 @@ exports[`swipe to switch tab 3`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tab__pane" style="display: none;">Text
<!---->
</div>
<div class="van-tab__pane" style="">
Text
</div>
<div class="van-tab__pane" style="display: none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display: none;">Text</div>
<div class="van-tab__pane" style=""></div>
<div class="van-tab__pane" style="display: none;"></div>
</div>
</div>
`;
@ -199,16 +150,9 @@ exports[`swipe to switch tab 4`] = `
</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;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="">Text</div>
<div class="van-tab__pane" style="display: none;"></div>
<div class="van-tab__pane" style="display: none;"></div>
</div>
</div>
`;