[improvement] rename packages dir to src (#3659)
This commit is contained in:
neverland
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-tabbar v-model="active">
|
||||
<van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('itemName')">
|
||||
<van-tabbar v-model="activeName">
|
||||
<van-tabbar-item
|
||||
name="home"
|
||||
icon="home-o"
|
||||
>
|
||||
{{ $t('tab') }}
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item
|
||||
name="search"
|
||||
icon="search"
|
||||
>
|
||||
{{ $t('tab') }}
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item
|
||||
name="friends"
|
||||
icon="friends-o"
|
||||
>
|
||||
{{ $t('tab') }}
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item
|
||||
name="setting"
|
||||
icon="setting-o"
|
||||
>
|
||||
{{ $t('tab') }}
|
||||
</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('badge')">
|
||||
<van-tabbar v-model="active2">
|
||||
<van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item
|
||||
icon="search"
|
||||
dot
|
||||
>
|
||||
{{ $t('tab') }}
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item
|
||||
icon="friends-o"
|
||||
info="5"
|
||||
>
|
||||
{{ $t('tab') }}
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item
|
||||
icon="setting-o"
|
||||
info="20"
|
||||
>
|
||||
{{ $t('tab') }}
|
||||
</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customIcon')">
|
||||
<van-tabbar v-model="active3">
|
||||
<van-tabbar-item info="3">
|
||||
<span>{{ $t('custom') }}</span>
|
||||
<template #icon="{ active }">
|
||||
<img :src="active ? icon.active : icon.normal">
|
||||
</template>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customColor')">
|
||||
<van-tabbar
|
||||
v-model="active4"
|
||||
active-color="#07c160"
|
||||
inactive-color="#000"
|
||||
>
|
||||
<van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
badge: '显示徽标',
|
||||
customIcon: '自定义图标',
|
||||
customColor: '自定义颜色',
|
||||
itemName: '通过名称匹配'
|
||||
},
|
||||
'en-US': {
|
||||
badge: 'Show Badge',
|
||||
customIcon: 'Custom Icon',
|
||||
customColor: 'Custom Color',
|
||||
itemName: 'Item Name'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
active2: 0,
|
||||
active3: 0,
|
||||
active4: 0,
|
||||
activeName: 'home',
|
||||
icon: {
|
||||
normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
|
||||
active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.demo-tabbar {
|
||||
.van-tabbar {
|
||||
position: relative;
|
||||
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,174 @@
|
||||
# Tabbar
|
||||
|
||||
### Install
|
||||
|
||||
``` javascript
|
||||
import { Tabbar, TabbarItem } from 'vant';
|
||||
|
||||
Vue.use(Tabbar).use(TabbarItem);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-tabbar v-model="active">
|
||||
<van-tabbar-item icon="home-o">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">Tab</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Item Name
|
||||
|
||||
```html
|
||||
<van-tabbar v-model="active">
|
||||
<van-tabbar-item name="home" icon="home-o">Tab</van-tabbar-item>
|
||||
<van-tabbar-item name="search" icon="search">Tab</van-tabbar-item>
|
||||
<van-tabbar-item name="friends" icon="friends-o">Tab</van-tabbar-item>
|
||||
<van-tabbar-item name="setting" icon="setting-o">Tab</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 'home'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Show Badge
|
||||
|
||||
```html
|
||||
<van-tabbar v-model="active">
|
||||
<van-tabbar-item icon="home-o">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="search" dot>Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o" info="5">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o" info="20">Tab</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
### Custom Icon
|
||||
|
||||
Use `icon` slot to custom icon
|
||||
|
||||
```html
|
||||
<van-tabbar v-model="active">
|
||||
<van-tabbar-item info="3">
|
||||
<span>Custom</span>
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.active ? icon.active : icon.normal"
|
||||
>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">Tab</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
icon: {
|
||||
normal: '//img.yzcdn.cn/icon-normal.png',
|
||||
active: '//img.yzcdn.cn/icon-active.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Custom Color
|
||||
|
||||
```html
|
||||
<van-tabbar
|
||||
v-model="active"
|
||||
active-color="#07c160"
|
||||
inactive-color="#000"
|
||||
>
|
||||
<van-tabbar-item icon="home-o">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="freinds-o">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">Tab</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
### Route Mode
|
||||
|
||||
```html
|
||||
<router-view />
|
||||
|
||||
<van-tabbar route>
|
||||
<van-tabbar-item
|
||||
replace
|
||||
to="/home"
|
||||
icon="home-o"
|
||||
>
|
||||
Tab
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item
|
||||
replace
|
||||
to="/search"
|
||||
icon="search"
|
||||
>
|
||||
Tab
|
||||
</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Tabbar Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| v-model | Identifier of current tab | `String | Number` | `0` |
|
||||
| fixed | Whether to fixed bottom | `Boolean` | `true` |
|
||||
| border | Whether to show border | `Boolean` | `true` |
|
||||
| z-index | Z-index | `Number` | `1` |
|
||||
| active-color | Color of active tab item | `String` | `#1989fa` |
|
||||
| inactive-color | Color of inactive tab item | `String` | `#7d7e80` |
|
||||
| route | Whether to enable route mode | `Boolean` | `false` |
|
||||
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` |
|
||||
|
||||
### Tabbar Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| change | Triggered when change active tab | active: index of current tab |
|
||||
|
||||
### TabbarItem Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| name | Identifier | `String | Number` | Item index |
|
||||
| icon | Icon name | `String` | - |
|
||||
| dot | Whether to show red dot | `Boolean` | - |
|
||||
| info | Info message | `String | Number` | - |
|
||||
| url | Link | `String` | - |
|
||||
| to | Target route of the link, same as to of `vue-router` | `String | Object` | - |
|
||||
| replace | If true, the navigation will not leave a history record | `Boolean` | `false` |
|
||||
|
||||
### TabbarItem Slots
|
||||
|
||||
| Name | Description | slot-scope |
|
||||
|------|------|------|
|
||||
| icon | Custom icon | active |
|
||||
@@ -0,0 +1,73 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { ParentMixin } from '../mixins/relation';
|
||||
|
||||
const [createComponent, bem] = createNamespace('tabbar');
|
||||
|
||||
export default createComponent({
|
||||
mixins: [ParentMixin('vanTabbar')],
|
||||
|
||||
props: {
|
||||
route: Boolean,
|
||||
activeColor: String,
|
||||
inactiveColor: String,
|
||||
safeAreaInsetBottom: Boolean,
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
children() {
|
||||
this.setActiveItem();
|
||||
},
|
||||
|
||||
value() {
|
||||
this.setActiveItem();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
setActiveItem() {
|
||||
this.children.forEach((item, index) => {
|
||||
item.active = (item.name || index) === this.value;
|
||||
});
|
||||
},
|
||||
|
||||
onChange(active) {
|
||||
if (active !== this.value) {
|
||||
this.$emit('input', active);
|
||||
this.$emit('change', active);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
return (
|
||||
<div
|
||||
style={{ zIndex: this.zIndex }}
|
||||
class={[
|
||||
{ 'van-hairline--top-bottom': this.border },
|
||||
bem({
|
||||
fixed: this.fixed,
|
||||
'safe-area-inset-bottom': this.safeAreaInsetBottom
|
||||
})
|
||||
]}
|
||||
>
|
||||
{this.slots()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,19 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-tabbar {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: @tabbar-height;
|
||||
background-color: @tabbar-background-color;
|
||||
|
||||
&--fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&--safe-area-inset-bottom {
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,172 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
|
||||
<div class="van-tabbar-item van-tabbar-item--active">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">标签</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-search">
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">标签</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-friends-o">
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">标签</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">标签</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
|
||||
<div class="van-tabbar-item van-tabbar-item--active">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
标签
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-search">
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
标签
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-friends-o">
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
标签
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
标签
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
|
||||
<div class="van-tabbar-item van-tabbar-item--active">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">标签</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon van-tabbar-item__icon--dot"><i class="van-icon van-icon-search">
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
标签
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-friends-o">
|
||||
<!----></i>
|
||||
<div class="van-info">5</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
标签
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
|
||||
<!----></i>
|
||||
<div class="van-info">20</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
标签
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
|
||||
<div class="van-tabbar-item van-tabbar-item--active">
|
||||
<div class="van-tabbar-item__icon"><img src="https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png">
|
||||
<div class="van-info">3</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item__text"><span>自定义</span></div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-search">
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">标签</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">标签</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
|
||||
<div class="van-tabbar-item van-tabbar-item--active" style="color: rgb(7, 193, 96);">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">标签</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item" style="color: rgb(0, 0, 0);">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-search">
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">标签</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item" style="color: rgb(0, 0, 0);">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-friends-o">
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">标签</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item" style="color: rgb(0, 0, 0);">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">标签</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,131 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`disable border 1`] = `<div class="van-tabbar van-tabbar--fixed" style="z-index: 1;"></div>`;
|
||||
|
||||
exports[`route mode 1`] = `
|
||||
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
|
||||
<div class="van-tabbar-item van-tabbar-item--active">
|
||||
<div class="van-tabbar-item__icon">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`route mode 2`] = `
|
||||
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item van-tabbar-item--active">
|
||||
<div class="van-tabbar-item__icon">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`route mode 3`] = `
|
||||
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item van-tabbar-item--active">
|
||||
<div class="van-tabbar-item__icon">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`watch tabbar value 1`] = `
|
||||
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">Tab</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item van-tabbar-item--active">
|
||||
<div class="van-tabbar-item__icon">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">Tab</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import demoTest from '../../../test/demo-test';
|
||||
|
||||
demoTest(Demo);
|
||||
@@ -0,0 +1,124 @@
|
||||
import { mount, later } from '../../../test/utils';
|
||||
import Vue from 'vue';
|
||||
import Tabbar from '..';
|
||||
import TabbarItem from '../../tabbar-item';
|
||||
|
||||
Vue.use(Tabbar);
|
||||
Vue.use(TabbarItem);
|
||||
|
||||
test('route mode', async () => {
|
||||
Vue.util.defineReactive(Vue.prototype, '$route', { path: '/home' });
|
||||
|
||||
Vue.prototype.$router = {
|
||||
replace(to) {
|
||||
Vue.prototype.$route.path = typeof to === 'string' ? to : to.path;
|
||||
}
|
||||
};
|
||||
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-tabbar route>
|
||||
<van-tabbar-item replace to="/home">
|
||||
Tab
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item replace to="/search">
|
||||
Tab
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item replace :to="{ path: '/star' }">
|
||||
Tab
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item>
|
||||
Tab
|
||||
</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
`
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
const items = wrapper.findAll('.van-tabbar-item');
|
||||
|
||||
items.at(1).trigger('click');
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
items.at(2).trigger('click');
|
||||
items.at(3).trigger('click');
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
|
||||
test('watch tabbar value', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-tabbar :value="value">
|
||||
<van-tabbar-item>Tab</van-tabbar-item>
|
||||
<van-tabbar-item>Tab</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
value: 0
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.setData({ value: 1 });
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('click event', () => {
|
||||
const onClick = jest.fn();
|
||||
const onChange = jest.fn();
|
||||
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-tabbar @change="onChange">
|
||||
<van-tabbar-item @click="onClick">Tab</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
`,
|
||||
methods: {
|
||||
onClick,
|
||||
onChange
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.find('.van-tabbar-item').trigger('click');
|
||||
expect(onClick).toHaveBeenCalledTimes(1);
|
||||
expect(onChange).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
test('name prop', () => {
|
||||
const onChange = jest.fn();
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-tabbar :value="value" @change="onChange">
|
||||
<van-tabbar-item name="a">Tab</van-tabbar-item>
|
||||
<van-tabbar-item name="b">Tab</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
value: 'a'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onChange
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.findAll('.van-tabbar-item').at(1).trigger('click');
|
||||
|
||||
expect(onChange).toHaveBeenCalledWith('b');
|
||||
});
|
||||
|
||||
test('disable border', () => {
|
||||
const wrapper = mount(Tabbar, {
|
||||
propsData: {
|
||||
border: false
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
@@ -0,0 +1,180 @@
|
||||
# Tabbar 标签栏
|
||||
|
||||
### 引入
|
||||
|
||||
``` javascript
|
||||
import { Tabbar, TabbarItem } from 'vant';
|
||||
|
||||
Vue.use(Tabbar).use(TabbarItem);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
`v-model`默认绑定选中标签的索引值，通过修改`v-model`即可切换选中的标签
|
||||
|
||||
```html
|
||||
<van-tabbar v-model="active">
|
||||
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 通过名称匹配
|
||||
|
||||
在标签指定`name`属性的情况下，`v-model`的值为当前标签的`name`
|
||||
|
||||
```html
|
||||
<van-tabbar v-model="active">
|
||||
<van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item name="search" icon="search">标签</van-tabbar-item>
|
||||
<van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 'home'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 显示徽标
|
||||
|
||||
```html
|
||||
<van-tabbar v-model="active">
|
||||
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="search" dot>标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
### 自定义图标
|
||||
|
||||
通过 icon 插槽自定义图标，可以通过 `slot-scope` 判断标签是否选中
|
||||
|
||||
```html
|
||||
<van-tabbar v-model="active">
|
||||
<van-tabbar-item info="3">
|
||||
<span>自定义</span>
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.active ? icon.active : icon.normal"
|
||||
>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
icon: {
|
||||
normal: '//img.yzcdn.cn/icon-normal.png',
|
||||
active: '//img.yzcdn.cn/icon-active.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
```html
|
||||
<van-tabbar
|
||||
v-model="active"
|
||||
active-color="#07c160"
|
||||
inactive-color="#000"
|
||||
>
|
||||
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="freinds-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
### 路由模式
|
||||
|
||||
标签栏支持路由模式，用于搭配`vue-router`使用。路由模式下会匹配页面路径和标签的`to`属性，并自动选中对应的标签
|
||||
|
||||
```html
|
||||
<router-view />
|
||||
|
||||
<van-tabbar route>
|
||||
<van-tabbar-item
|
||||
replace
|
||||
to="/home"
|
||||
icon="home-o"
|
||||
>
|
||||
标签
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item
|
||||
replace
|
||||
to="/search"
|
||||
icon="search"
|
||||
>
|
||||
标签
|
||||
</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Tabbar Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| v-model | 当前选中标签的名称或索引值 | `String | Number` | `0` | - |
|
||||
| fixed | 是否固定在底部 | `Boolean` | `true` | - |
|
||||
| border | 是否显示外边框 | `Boolean` | `true` | 2.0.0 |
|
||||
| z-index | 元素 z-index | `Number` | `1` | 1.1.9 |
|
||||
| active-color | 选中标签的颜色 | `String` | `#1989fa` | 1.5.1 |
|
||||
| inactive-color | 未选中标签的颜色 | `String` | `#7d7e80` | 2.0.0 |
|
||||
| route | 是否开启路由模式 | `Boolean` | `false` | 2.0.0 |
|
||||
| safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 |
|
||||
|
||||
### Tabbar Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| change | 切换标签时触发 | active: 当前选中标签的名称或索引值 |
|
||||
|
||||
### TabbarItem Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| name | 标签名称，作为匹配的标识符 | `String | Number` | 当前标签的索引值 | 2.0.0 |
|
||||
| icon | 图标名称或图片链接，可选值见 Icon 组件| `String` | - | - |
|
||||
| dot | 是否显示小红点 | `Boolean` | - | - |
|
||||
| info | 图标右上角提示信息 | `String | Number` | - | - |
|
||||
| url | 跳转链接 | `String` | - | - |
|
||||
| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |
|
||||
| replace | 跳转时是否替换当前页面历史 | `Boolean` | `false` | - |
|
||||
|
||||
### TabbarItem Slots
|
||||
|
||||
| 名称 | 说明 | slot-scope |
|
||||
|------|------|------|
|
||||
| icon | 自定义图标 | active: 是否为选中标签 |
|
||||
Reference in New Issue
Block a user