[new feature] TabbarItem: add name prop

This commit is contained in:
陈嘉涵
2019-05-19 18:20:54 +08:00
parent 20bf1f651e
commit a6b60c2a55
8 changed files with 160 additions and 8 deletions
+28 -2
View File
@@ -12,6 +12,8 @@ Vue.use(Tabbar).use(TabbarItem);
### 基础用法
`v-model`默认绑定选中标签的索引值,通过修改`v-model`即可切换选中的标签
```html
<van-tabbar v-model="active">
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
@@ -31,6 +33,29 @@ export default {
}
```
### 通过名称匹配
在标签指定`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
@@ -121,7 +146,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| v-model | 当前选中标签的索引 | `Number` | - | - |
| v-model | 当前选中标签的名称或索引 | `String | Number` | `0` | - |
| fixed | 是否固定在底部 | `Boolean` | `true` | - |
| z-index | 元素 z-index | `Number` | `1` | 1.1.9 |
| active-color | 选中标签的颜色 | `String` | `#1989fa` | 1.5.1 |
@@ -133,12 +158,13 @@ export default {
| 事件名 | 说明 | 回调参数 |
|------|------|------|
| change | 切换标签时触发 | active: 当前选中标签 |
| change | 切换标签时触发 | active: 当前选中标签的名称或索引值 |
### TabbarItem Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| name | 标签名称,作为匹配的标识符 | `String | Number` | 当前标签的索引值 | 2.0.0 |
| icon | 图标名称或图片链接,可选值见 Icon 组件| `String` | - | - |
| dot | 是否显示小红点 | `Boolean` | - | - |
| info | 图标右上角提示信息 | `String | Number` | - | - |