diff --git a/src/tabbar-item/index.js b/src/tabbar-item/index.js index 95190c94e..80b273532 100644 --- a/src/tabbar-item/index.js +++ b/src/tabbar-item/index.js @@ -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> diff --git a/src/tabbar/README.md b/src/tabbar/README.md index 6da4777e8..fd49ea700 100644 --- a/src/tabbar/README.md +++ b/src/tabbar/README.md @@ -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` | diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md index da612e324..92dd8d86e 100644 --- a/src/tabbar/README.zh-CN.md +++ b/src/tabbar/README.zh-CN.md @@ -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` | diff --git a/src/tabbar/demo/index.vue b/src/tabbar/demo/index.vue index 44c17a26a..081e8c80a 100644 --- a/src/tabbar/demo/index.vue +++ b/src/tabbar/demo/index.vue @@ -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: '通过名称匹配',