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

feat(TabbarItem): add badge prop, mark info prop as deprecated

Browse Source
This commit is contained in:
chenjiahan 2020-03-17 20:49:08 +08:00
parent 575577ed58
commit d61cbdd086
4 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/tabbar-item/index.js
View File

@ -20,6 +20,7 @@ export default createComponent({
icon: String,
name: [Number, String],
info: [Number, String],
badge: [Number, String],
iconPrefix: String,
},
@ -70,7 +71,10 @@ export default createComponent({
<div class={bem({ active })} style={{ color }} onClick={this.onClick}>
<div class={bem('icon')}>
{this.genIcon(active)}
<Info dot={this.dot} info={this.info} />
<Info
dot={this.dot}
info={isDef(this.badge) ? this.badge : this.info}
/>
</div>
<div class={bem('text')}>{this.slots('default', { active })}</div>
</div>

8
src/tabbar/README.md
View File

@ -60,8 +60,8 @@ export default {
<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-item icon="friends-o" badge="5">Tab</van-tabbar-item>
<van-tabbar-item icon="setting-o" badge="20">Tab</van-tabbar-item>
</van-tabbar>
```
@ -71,7 +71,7 @@ Use `icon` slot to custom icon
```html
<van-tabbar v-model="active">
<van-tabbar-item info="3">
<van-tabbar-item badge="3">
<span>Custom</span>
<img
slot="icon"
@ -181,7 +181,7 @@ export default {
| icon | Icon name | *string* | - |
| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` |
| dot | Whether to show red dot | *boolean* | - |
| info | Content of the badge | *number \| string* | - |
| badge `v2.5.6` | Content of the badge | *number \| string* | `''` |
| 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` |

13
src/tabbar/README.zh-CN.md
View File

@ -58,16 +58,16 @@ export default {
}
```
### 提示信息
### 徽标提示
设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标
设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
```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-item icon="friends-o" badge="5">标签</van-tabbar-item>
<van-tabbar-item icon="setting-o" badge="20">标签</van-tabbar-item>
</van-tabbar>
```
@ -77,7 +77,7 @@ export default {
```html
<van-tabbar v-model="active">
<van-tabbar-item info="3">
<van-tabbar-item badge="3">
<span>自定义</span>
<img
slot="icon"
@ -188,7 +188,8 @@ export default {
| icon | [图标名称](#/zh-CN/icon)或图片链接| *string* | - |
| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` |
| dot | 是否显示图标右上角小红点 | *boolean* | `false` |
| info | 图标右上角徽标的内容 | *number \| string* | - |
| badge `v2.5.6` | 图标右上角徽标的内容 | *number \| string* | - |
| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | *number \| string* | - |
| url | 点击后跳转的链接地址 | *string* | - |
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - |
| replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` |

8
src/tabbar/demo/index.vue
View File

@ -30,10 +30,10 @@
<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">
<van-tabbar-item icon="friends-o" badge="5">
{{ $t('tab') }}
</van-tabbar-item>
<van-tabbar-item icon="setting-o" info="20">
<van-tabbar-item icon="setting-o" badge="20">
{{ $t('tab') }}
</van-tabbar-item>
</van-tabbar>
@ -41,7 +41,7 @@
<demo-block :title="$t('customIcon')">
<van-tabbar v-model="active3">
<van-tabbar-item info="3">
<van-tabbar-item badge="3">
<span>{{ $t('custom') }}</span>
<template #icon="props">
<img :src="props.active ? icon.active : icon.inactive" />
@ -80,7 +80,7 @@
export default {
i18n: {
'zh-CN': {
badge: '提示信息',
badge: '徽标提示',
customIcon: '自定义图标',
customColor: '自定义颜色',
matchByName: '通过名称匹配',