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] Tabs: use relation mixin

Browse Source
This commit is contained in:
陈嘉涵 2019-05-07 10:06:57 +08:00
parent 912d691f9e
commit c1da495cb7
4 changed files with 43 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/tab/index.js
View File

@ -1,11 +1,11 @@
/* eslint-disable object-shorthand */
import { use } from '../utils';
import { FindParentMixin } from '../mixins/find-parent';
import { ChildrenMixin } from '../mixins/relation';
const [sfc, bem] = use('tab');
export default sfc({
mixins: [FindParentMixin],
mixins: [ChildrenMixin('vanTabs')],
props: {
title: String,
@ -19,10 +19,6 @@ export default sfc({
},
computed: {
index() {
return this.parent.tabs.indexOf(this);
},
selected() {
return this.index === this.parent.curActive;
}
@ -38,24 +34,12 @@ export default sfc({
}
},
created() {
this.findParent('van-tabs');
},
mounted() {
const { tabs } = this.parent;
const index = this.parent.slots().indexOf(this.$vnode);
tabs.splice(index === -1 ? tabs.length : index, 0, this);
if (this.slots('title')) {
this.parent.renderTitle(this.$refs.title, this.index);
}
},
beforeDestroy() {
this.parent.tabs.splice(this.index, 1);
},
render(h) {
const { slots } = this;
const shouldRender = this.inited || !this.parent.lazyRender;

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

@ -6,15 +6,16 @@ exports[`change tabs data 1`] = `
<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">
<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">Text</div>
<div class="van-tab__pane" style="display: none;">
<!---->
<div><span>title2</span></div>
</div>
<div class="van-tab__pane" style="display: none;">
<!---->
@ -35,7 +36,7 @@ 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">Text</div>
<div class="van-tab__pane" style="display: none;">
<!---->
</div>
@ -105,7 +106,7 @@ exports[`lazy render 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tab__pane" style="">Text</div>
<div class="van-tab__pane">Text</div>
<div class="van-tab__pane" style="display: none;">
<!---->
<div><span>title2</span></div>
@ -130,7 +131,7 @@ exports[`lazy render 2`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tab__pane" style="">Text</div>
<div class="van-tab__pane">Text</div>
<div class="van-tab__pane" style="display: none;">
Text
</div>
@ -149,7 +150,7 @@ exports[`render nav-left & nav-right slot 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tab__pane" style="">Text</div>
<div class="van-tab__pane">Text</div>
<div class="van-tab__pane" style="display: none;">
<!---->
<div><span>title2</span></div>
@ -165,7 +166,7 @@ exports[`swipe to switch tab 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); width: 2px; transform: translateX(-1px);"></div>
<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">
<div><span>title2</span></div>
@ -174,7 +175,7 @@ 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">Text</div>
<div class="van-tab__pane" style="display: none;">
<!---->
</div>
@ -189,9 +190,9 @@ exports[`swipe to switch tab 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"><span class="van-ellipsis">title1</span></div>
<div class="van-tab van-tab--active">
<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">
<div><span>title2</span></div>
</div>
<div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
@ -213,9 +214,9 @@ exports[`swipe to switch tab 3`] = `
<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"><span class="van-ellipsis">title1</span></div>
<div class="van-tab van-tab--active">
<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">
<div><span>title2</span></div>
</div>
<div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
@ -237,7 +238,7 @@ exports[`swipe to switch tab 4`] = `
<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-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">
<div><span>title2</span></div>

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

@ -88,6 +88,8 @@ test('swipe to switch tab', async () => {
test('change tabs data', async () => {
const wrapper = createWrapper();
await later();
expect(wrapper).toMatchSnapshot();
wrapper.setData({

36
packages/tabs/index.js
View File

@ -2,13 +2,19 @@ import { use, isDef } from '../utils';
import { raf } from '../utils/raf';
import { on, off } from '../utils/event';
import { TouchMixin } from '../mixins/touch';
import { setScrollTop, getScrollTop, getElementTop, getScrollEventTarget } from '../utils/scroll';
import { ParentMixin } from '../mixins/relation';
import {
setScrollTop,
getScrollTop,
getElementTop,
getScrollEventTarget
} from '../utils/scroll';
const [sfc, bem] = use('tabs');
const tabBem = use('tab')[1];
export default sfc({
mixins: [TouchMixin],
mixins: [TouchMixin, ParentMixin('vanTabs')],
model: {
prop: 'active'
@ -59,7 +65,6 @@ export default sfc({
data() {
return {
tabs: [],
position: '',
curActive: null,
lineStyle: {
@ -76,7 +81,7 @@ export default sfc({
computed: {
// whether the nav is scrollable
scrollable() {
return this.tabs.length > this.swipeThreshold || !this.ellipsis;
return this.children.length > this.swipeThreshold || !this.ellipsis;
},
wrapStyle() {
@ -124,7 +129,7 @@ export default sfc({
this.setLine();
},
tabs() {
children() {
this.correctActive(this.curActive || this.active);
this.scrollIntoView();
this.setLine();
@ -218,7 +223,7 @@ export default sfc({
/* istanbul ignore else */
if (deltaX > 0 && curActive !== 0) {
this.setCurActive(curActive - 1);
} else if (deltaX < 0 && curActive !== this.tabs.length - 1) {
} else if (deltaX < 0 && curActive !== this.children.length - 1) {
this.setCurActive(curActive + 1);
}
}
@ -283,8 +288,8 @@ export default sfc({
// correct the value of active
correctActive(active) {
active = +active;
const exist = this.tabs.some(tab => tab.index === active);
const defaultActive = (this.tabs[0] || {}).index || 0;
const exist = this.children.some(tab => tab.index === active);
const defaultActive = (this.children[0] || {}).index || 0;
this.setCurActive(exist ? active : defaultActive);
},
@ -294,7 +299,7 @@ export default sfc({
this.$emit('input', active);
if (this.curActive !== null) {
this.$emit('change', active, this.tabs[active].title);
this.$emit('change', active, this.children[active].title);
}
this.curActive = active;
}
@ -304,8 +309,8 @@ export default sfc({
const diff = reverse ? -1 : 1;
let index = active;
while (index >= 0 && index < this.tabs.length) {
if (!this.tabs[index].disabled) {
while (index >= 0 && index < this.children.length) {
if (!this.children[index].disabled) {
return index;
}
index += diff;
@ -314,7 +319,7 @@ export default sfc({
// emit event when clicked
onClick(index) {
const { title, disabled } = this.tabs[index];
const { title, disabled } = this.children[index];
if (disabled) {
this.$emit('disabled', index, title);
} else {
@ -400,7 +405,7 @@ export default sfc({
render(h) {
const { type, ellipsis, animated, scrollable } = this;
const Nav = this.tabs.map((tab, index) => (
const Nav = this.children.map((tab, index) => (
<div
ref="tabs"
refInFor
@ -425,7 +430,10 @@ export default sfc({
<div
ref="wrap"
style={this.wrapStyle}
class={[bem('wrap', { scrollable }), { 'van-hairline--top-bottom': type === 'line' }]}
class={[
bem('wrap', { scrollable }),
{ 'van-hairline--top-bottom': type === 'line' }
]}
>
<div ref="nav" class={bem('nav', [type])} style={this.navStyle}>
{this.slots('nav-left')}