mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-22 14:39:16 +08:00
[new feature] Tabs: add animated props to change tabs with animation (#2126)
This commit is contained in:
张敏
neverland
parent
8042e37829
commit
d84b13a6cc
@ -7,7 +7,11 @@
|
||||
left-arrow
|
||||
@click-left="onBack"
|
||||
>
|
||||
<a slot="right" :href="demoLink" target="_blank">
|
||||
<a
|
||||
slot="right"
|
||||
:href="demoLink"
|
||||
target="_blank"
|
||||
>
|
||||
<van-icon name="edit" />
|
||||
</a>
|
||||
</van-nav-bar>
|
||||
|
||||
@ -5,11 +5,24 @@
|
||||
<span>Vant</span>
|
||||
</h1>
|
||||
<div class="mobile-switch-lang">
|
||||
<span :class="{ active: $vantLang === 'en-US' }" @click="switchLang('en-US')">EN</span>
|
||||
<span :class="{ active: $vantLang === 'zh-CN' }" @click="switchLang('zh-CN')">中文</span>
|
||||
<span
|
||||
:class="{ active: $vantLang === 'en-US' }"
|
||||
@click="switchLang('en-US')"
|
||||
>
|
||||
EN
|
||||
</span>
|
||||
<span
|
||||
:class="{ active: $vantLang === 'zh-CN' }"
|
||||
@click="switchLang('zh-CN')"
|
||||
>
|
||||
中文
|
||||
</span>
|
||||
</div>
|
||||
<h2 class="zanui-desc">{{ description }}</h2>
|
||||
<template v-for="item in navList" v-if="item.showInMobile">
|
||||
<template
|
||||
v-for="item in navList"
|
||||
v-if="item.showInMobile"
|
||||
>
|
||||
<mobile-nav
|
||||
v-for="(group, index) in item.groups"
|
||||
:group="group"
|
||||
@ -26,16 +39,16 @@ import MobileNav from './MobileNav';
|
||||
import { setLang } from '../utils/lang';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MobileNav
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
docConfig
|
||||
};
|
||||
},
|
||||
|
||||
components: {
|
||||
MobileNav
|
||||
},
|
||||
|
||||
computed: {
|
||||
navList() {
|
||||
return this.docConfig[this.$vantLang].nav || [];
|
||||
|
||||
@ -8,8 +8,16 @@
|
||||
v-for="(demo, index) in demos"
|
||||
>
|
||||
<h4>{{ demo.title }}</h4>
|
||||
<a :href="demo.source" target="_blank">{{ $t('source') }}</a>
|
||||
<img :src="demo.preview" @click="onChangeDemo(demo, index)" >
|
||||
<a
|
||||
:href="demo.source"
|
||||
target="_blank"
|
||||
>
|
||||
{{ $t('source') }}
|
||||
</a>
|
||||
<img
|
||||
:src="demo.preview"
|
||||
@click="onChangeDemo(demo, index)"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
<template>
|
||||
<van-collapse v-model="active" class="mobile-nav">
|
||||
<van-collapse-item :title="group.groupName" :name="group.groupName" class="mobile-nav__item">
|
||||
<van-collapse
|
||||
v-model="active"
|
||||
class="mobile-nav"
|
||||
>
|
||||
<van-collapse-item
|
||||
class="mobile-nav__item"
|
||||
:title="group.groupName"
|
||||
:name="group.groupName"
|
||||
>
|
||||
<van-cell
|
||||
v-if="!navItem.disabled"
|
||||
v-for="(navItem, index) in group.list"
|
||||
|
||||
@ -33,7 +33,7 @@ if (process.env.NODE_ENV !== 'production') {
|
||||
}
|
||||
|
||||
new Vue({ // eslint-disable-line
|
||||
el: '#app',
|
||||
render: h => h(App),
|
||||
router,
|
||||
el: '#app'
|
||||
router
|
||||
});
|
||||
|
||||
@ -91,6 +91,21 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title8')">
|
||||
<van-tabs
|
||||
:active="active"
|
||||
animated
|
||||
>
|
||||
<van-tab
|
||||
:title="$t('tab') + index"
|
||||
v-for="index in tabs"
|
||||
:key="index"
|
||||
>
|
||||
{{ $t('content') }} {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title9')">
|
||||
<van-tabs
|
||||
:active="active"
|
||||
swipeable
|
||||
@ -118,7 +133,8 @@ export default {
|
||||
title5: '点击事件',
|
||||
title6: '粘性布局',
|
||||
title7: '自定义标签',
|
||||
title8: '滑动切换',
|
||||
title8: '切换动画',
|
||||
title9: '滑动切换',
|
||||
disabled: ' 已被禁用'
|
||||
},
|
||||
'en-US': {
|
||||
@ -130,7 +146,8 @@ export default {
|
||||
title5: 'Click Event',
|
||||
title6: 'Sticky',
|
||||
title7: 'Custom Tab',
|
||||
title8: 'Swipeable',
|
||||
title8: 'Switch Animation',
|
||||
title9: 'Swipeable',
|
||||
disabled: ' is disabled'
|
||||
}
|
||||
},
|
||||
|
||||
@ -122,6 +122,18 @@ Use title slot to custom tab title
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
#### Switch Animation
|
||||
|
||||
Use `animated` props to change tabs with animation
|
||||
|
||||
```html
|
||||
<van-tabs v-model="active" animated>
|
||||
<van-tab v-for="index in 4" :title="'tab ' + index">
|
||||
content {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
#### Swipeable
|
||||
|
||||
In swipeable mode, you can switch tabs with swipe gestrue in the content
|
||||
@ -141,12 +153,13 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
|
||||
| v-model | Index of active tab | `String` `Number` | `0` |
|
||||
| color | Tab color | `String` | `#f44` |
|
||||
| type | Can be set to `line` `card` | `String` | `line` |
|
||||
| duration | Toggle tab's animation time | `Number` | `0.2` | - |
|
||||
| duration | Toggle tab's animation time | `Number` | `0.4` | - |
|
||||
| line-width | Width of tab line (px) | `Number` | Width of active tab |
|
||||
| swipe-threshold | Set swipe tabs threshold | `Number` | `4` | - |
|
||||
| sticky | Whether to use sticky mode | `Boolean` | `false` |
|
||||
| offset-top | Offset top when use sticky mode | `Number` | `0` |
|
||||
| swipeable | Whether to switch tabs with swipe gestrue in the content | `Boolean` | `false` |
|
||||
| animated | Whether to change tabs with animation | `false` | - |
|
||||
|
||||
### Tab API
|
||||
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<div
|
||||
:class="b('pane')"
|
||||
v-show="isSelected"
|
||||
:class="b('pane', { float: parent.animated })"
|
||||
v-show="parent.animated || isSelected"
|
||||
:style="paneStyle"
|
||||
>
|
||||
<slot v-if="inited" />
|
||||
<div
|
||||
@ -29,7 +30,8 @@ export default create({
|
||||
|
||||
data() {
|
||||
return {
|
||||
inited: false
|
||||
inited: false,
|
||||
paneStyle: {}
|
||||
};
|
||||
},
|
||||
|
||||
@ -48,6 +50,12 @@ export default create({
|
||||
this.inited = this.inited || this.isSelected;
|
||||
},
|
||||
|
||||
'parent.computedWidth'(width) {
|
||||
this.paneStyle = {
|
||||
width: `${width}px`
|
||||
};
|
||||
},
|
||||
|
||||
title() {
|
||||
this.parent.setLine();
|
||||
}
|
||||
|
||||
@ -10,6 +10,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tabs__track" style="display:none;">
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<!---->
|
||||
@ -29,6 +30,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
@ -37,6 +39,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tabs__track" style="display:none;">
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<!---->
|
||||
@ -72,6 +75,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
@ -80,6 +84,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tabs__track" style="display:none;">
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<!---->
|
||||
@ -95,6 +100,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-tabs van-tabs--card">
|
||||
<div class="van-tabs__wrap">
|
||||
@ -103,6 +109,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tabs__track" style="display:none;">
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<!---->
|
||||
@ -118,6 +125,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
@ -126,6 +134,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tabs__track" style="display:none;">
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<!---->
|
||||
@ -137,6 +146,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
@ -145,6 +155,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tabs__track" style="display:none;">
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<!---->
|
||||
@ -164,6 +175,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
@ -172,6 +184,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tabs__track" style="display:none;">
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<div>
|
||||
@ -195,6 +208,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
@ -203,6 +217,36 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tabs__track" style="width:0px;transition-duration:0.4s;transform:translateX(0px);display:none;">
|
||||
<div class="van-tab__pane van-tab__pane--float">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane van-tab__pane--float">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane van-tab__pane--float">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane van-tab__pane--float">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</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"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tabs__track" style="display:none;">
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<!---->
|
||||
@ -222,5 +266,6 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1,15 +1,41 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`click to switch tab 1`] = `
|
||||
exports[`change tabs data 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">
|
||||
<div class="van-tabs__line" style="width: 0px;"></div>
|
||||
<div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
|
||||
<div class="van-tabs__line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tabs__track" style="display: none;">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`change tabs data 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"></div>
|
||||
<div class="van-tab van-tab--active"><span class="van-ellipsis">
|
||||
title1
|
||||
</span></div>
|
||||
<div class="van-tab"><span class="van-ellipsis">
|
||||
title2
|
||||
|
||||
</span></div>
|
||||
<div class="van-tab van-tab--disabled"><span class="van-ellipsis">
|
||||
title3
|
||||
@ -17,16 +43,52 @@ 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 class="van-tabs__track" style="display: none;">
|
||||
<div class="van-tab__pane" style="">
|
||||
<!---->
|
||||
<!---->
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`click 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="width: 2px; 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tabs__track" style="display: none;">
|
||||
<div class="van-tab__pane" style="width: 0px;">Text
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none; width: 0px;">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none; width: 0px;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -35,29 +97,31 @@ exports[`click to switch tab 1`] = `
|
||||
exports[`click 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">
|
||||
<div class="van-tabs__line" style="width: 0px;"></div>
|
||||
<div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
|
||||
<div class="van-tabs__line" style="width: 2px; background-color: rgb(255, 68, 68);"></div>
|
||||
<div class="van-tab"><span class="van-ellipsis">
|
||||
title1
|
||||
</span></div>
|
||||
<div class="van-tab van-tab--active"><span class="van-ellipsis">
|
||||
title2
|
||||
</span></div>
|
||||
<div class="van-tab van-tab--active">
|
||||
<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="display: none;">Text
|
||||
<div class="van-tabs__track" style="display: none;">
|
||||
<div class="van-tab__pane" style="width: 0px; display: none;">Text
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="">Text
|
||||
<div class="van-tab__pane" style="width: 0px;">
|
||||
Text
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none; width: 0px;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -66,30 +130,31 @@ exports[`click to switch tab 2`] = `
|
||||
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">
|
||||
<div class="van-tabs__line" style="width: 0px;"></div>
|
||||
<div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
|
||||
<div class="van-tabs__line" style="width: 2px; 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">
|
||||
title2
|
||||
</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 class="van-tabs__track" style="display: none;">
|
||||
<div class="van-tab__pane" style="width: 0px;">Text
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none;">
|
||||
<div class="van-tab__pane" style="display: none; width: 0px;">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none; width: 0px;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -98,29 +163,31 @@ exports[`swipe to switch tab 1`] = `
|
||||
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">
|
||||
<div class="van-tabs__line" style="width: 0px;"></div>
|
||||
<div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
|
||||
<div class="van-tabs__line" style="width: 2px; background-color: rgb(255, 68, 68);"></div>
|
||||
<div class="van-tab"><span class="van-ellipsis">
|
||||
title1
|
||||
</span></div>
|
||||
<div class="van-tab van-tab--active"><span class="van-ellipsis">
|
||||
title2
|
||||
</span></div>
|
||||
<div class="van-tab van-tab--active">
|
||||
<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="display: none;">Text
|
||||
<div class="van-tabs__track" style="display: none;">
|
||||
<div class="van-tab__pane" style="width: 0px; display: none;">Text
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="">Text
|
||||
<div class="van-tab__pane" style="width: 0px;">
|
||||
Text
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none; width: 0px;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -129,29 +196,31 @@ exports[`swipe to switch tab 2`] = `
|
||||
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">
|
||||
<div class="van-tabs__line" style="width: 0px;"></div>
|
||||
<div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
|
||||
<div class="van-tabs__line" style="width: 2px; background-color: rgb(255, 68, 68);"></div>
|
||||
<div class="van-tab"><span class="van-ellipsis">
|
||||
title1
|
||||
</span></div>
|
||||
<div class="van-tab van-tab--active"><span class="van-ellipsis">
|
||||
title2
|
||||
</span></div>
|
||||
<div class="van-tab van-tab--active">
|
||||
<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="display: none;">Text
|
||||
<div class="van-tabs__track" style="display: none;">
|
||||
<div class="van-tab__pane" style="width: 0px; display: none;">Text
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="">Text
|
||||
<div class="van-tab__pane" style="width: 0px;">
|
||||
Text
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none; width: 0px;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -160,29 +229,31 @@ exports[`swipe to switch tab 3`] = `
|
||||
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">
|
||||
<div class="van-tabs__line" style="width: 0px;"></div>
|
||||
<div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
|
||||
<div class="van-tabs__line" style="width: 2px; 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">
|
||||
title2
|
||||
</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 class="van-tabs__track" style="display: none;">
|
||||
<div class="van-tab__pane" style="width: 0px;">Text
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none;">Text
|
||||
<div class="van-tab__pane" style="width: 0px; display: none;">
|
||||
Text
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none; width: 0px;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,9 +5,18 @@ import { mount, later, triggerDrag } from '../../../test/utils';
|
||||
function createWrapper(options) {
|
||||
return mount({
|
||||
template: `
|
||||
<tabs @change="onChange" swipeable>
|
||||
<tab title="title1">Text</tab>
|
||||
<tab title="title2">Text</tab>
|
||||
<tabs @change="onChange"
|
||||
:color="color"
|
||||
:type="type"
|
||||
:swipeable="swipeable"
|
||||
:sticky="sticky"
|
||||
:line-width="lineWidth"
|
||||
>
|
||||
<tab :title="title1">Text</tab>
|
||||
<tab>
|
||||
<span slot="title">title2</span>
|
||||
Text
|
||||
</tab>
|
||||
<tab title="title3" disabled>Text</tab>
|
||||
</tabs>
|
||||
`,
|
||||
@ -15,6 +24,16 @@ function createWrapper(options) {
|
||||
Tab,
|
||||
Tabs
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title1: 'title1',
|
||||
color: '#f44',
|
||||
type: 'line',
|
||||
swipeable: true,
|
||||
sticky: true,
|
||||
lineWidth: 2
|
||||
};
|
||||
},
|
||||
...options
|
||||
});
|
||||
}
|
||||
@ -61,3 +80,18 @@ test('swipe to switch tab', async() => {
|
||||
await later();
|
||||
wrapper.destroy();
|
||||
});
|
||||
|
||||
test('change tabs data', async() => {
|
||||
const wrapper = createWrapper();
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
wrapper.setData({
|
||||
swipeable: false,
|
||||
sticky: false,
|
||||
type: 'card',
|
||||
color: 'blue',
|
||||
title1: 'new title1'
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -126,6 +126,18 @@ export default {
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
#### 切换动画
|
||||
|
||||
通过`animated`属性可以开启切换tab时的动画
|
||||
|
||||
```html
|
||||
<van-tabs v-model="active" animated>
|
||||
<van-tab v-for="index in 4" :title="'选项 ' + index">
|
||||
内容 {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
#### 滑动切换
|
||||
|
||||
通过`swipeable`属性可以开启滑动切换tab
|
||||
@ -145,12 +157,13 @@ export default {
|
||||
| v-model | 当前标签的索引 | `String` `Number` | `0` | 1.0.6 |
|
||||
| color | 标签颜色 | `String` | `#f44` | 1.2.0 |
|
||||
| type | 样式类型，可选值为`card` | `String` | `line` | - |
|
||||
| duration | 动画时间，单位秒 | `Number` | `0.2` | - |
|
||||
| duration | 动画时间，单位秒 | `Number` | `0.4` | - |
|
||||
| line-width | 底部条宽度，单位 px | `Number` | - | 1.1.1 |
|
||||
| swipeable | 是否开启手势滑动切换 | `Boolean` | `false` | 1.0.0 |
|
||||
| sticky | 是否使用粘性定位布局 | `Boolean` | `false` | - |
|
||||
| offset-top | 粘性定位布局下与顶部的最小距离，单位 px | `Number` | `0` | 1.1.15 |
|
||||
| swipe-threshold | 滚动阈值，标签数量超过多少个可滚动 | `Number` | `4` | - |
|
||||
| animated | 是否使用动画切换 Tabs | `false` | - | 1.4.5 |
|
||||
|
||||
### Tab API
|
||||
|
||||
|
||||
@ -114,6 +114,10 @@
|
||||
background-color: @red;
|
||||
}
|
||||
|
||||
&__content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&--line {
|
||||
padding-top: @tabs-line-height;
|
||||
|
||||
@ -129,4 +133,12 @@
|
||||
height: @tabs-card-height;
|
||||
}
|
||||
}
|
||||
|
||||
.van-tab__pane {
|
||||
box-sizing: border-box;
|
||||
|
||||
&--float {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -41,10 +41,16 @@
|
||||
<div
|
||||
ref="content"
|
||||
:class="b('content')"
|
||||
>
|
||||
<div
|
||||
v-show="computedWidth !== 0"
|
||||
:class="b('track')"
|
||||
:style="trackStyle"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -78,7 +84,7 @@ export default create({
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 0.2
|
||||
default: 0.4
|
||||
},
|
||||
swipeThreshold: {
|
||||
type: Number,
|
||||
@ -87,7 +93,8 @@ export default create({
|
||||
offsetTop: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
animated: Boolean
|
||||
},
|
||||
|
||||
data() {
|
||||
@ -100,7 +107,8 @@ export default create({
|
||||
resize: false,
|
||||
sticky: false,
|
||||
swipeable: false
|
||||
}
|
||||
},
|
||||
computedWidth: 0
|
||||
};
|
||||
},
|
||||
|
||||
@ -131,6 +139,23 @@ export default create({
|
||||
return {
|
||||
borderColor: this.color
|
||||
};
|
||||
},
|
||||
|
||||
trackStyle() {
|
||||
const {
|
||||
curActive,
|
||||
computedWidth = 0,
|
||||
tabs,
|
||||
animated
|
||||
} = this;
|
||||
if (!animated) return {};
|
||||
|
||||
const offset = -1 * computedWidth * curActive;
|
||||
return {
|
||||
width: `${computedWidth * tabs.length}px`,
|
||||
transitionDuration: `${this.duration}s`,
|
||||
transform: `translateX(${offset}px)`
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
@ -173,6 +198,7 @@ export default create({
|
||||
mounted() {
|
||||
this.correctActive(this.active);
|
||||
this.setLine();
|
||||
this.setWidth();
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.handlers(true);
|
||||
@ -196,6 +222,13 @@ export default create({
|
||||
},
|
||||
|
||||
methods: {
|
||||
setWidth() {
|
||||
if (this.$el) {
|
||||
const rect = this.$el.getBoundingClientRect() || {};
|
||||
this.computedWidth = rect.width;
|
||||
}
|
||||
},
|
||||
|
||||
// whether to bind sticky listener
|
||||
handlers(bind) {
|
||||
const { events } = this;
|
||||
@ -267,11 +300,13 @@ export default create({
|
||||
// update nav bar style
|
||||
setLine() {
|
||||
this.$nextTick(() => {
|
||||
if (!this.$refs.tabs || this.type !== 'line') {
|
||||
const { tabs } = this.$refs;
|
||||
|
||||
if (!tabs || this.type !== 'line') {
|
||||
return;
|
||||
}
|
||||
|
||||
const tab = this.$refs.tabs[this.curActive];
|
||||
const tab = tabs[this.curActive];
|
||||
const width = this.isDef(this.lineWidth) ? this.lineWidth : (tab.offsetWidth / 2);
|
||||
const left = tab.offsetLeft + (tab.offsetWidth - width) / 2;
|
||||
|
||||
@ -329,11 +364,13 @@ export default create({
|
||||
|
||||
// scroll active tab into view
|
||||
scrollIntoView(immediate) {
|
||||
if (!this.scrollable || !this.$refs.tabs) {
|
||||
const { tabs } = this.$refs;
|
||||
|
||||
if (!this.scrollable || !tabs) {
|
||||
return;
|
||||
}
|
||||
|
||||
const tab = this.$refs.tabs[this.curActive];
|
||||
const tab = tabs[this.curActive];
|
||||
const { nav } = this.$refs;
|
||||
const { scrollLeft, offsetWidth: navWidth } = nav;
|
||||
const { offsetLeft, offsetWidth: tabWidth } = tab;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user