diff --git a/docs/markdown/v2-progress-tracking.md b/docs/markdown/v2-progress-tracking.md index 72816069f..cf406782f 100644 --- a/docs/markdown/v2-progress-tracking.md +++ b/docs/markdown/v2-progress-tracking.md @@ -163,3 +163,7 @@ - 新增`route`属性 - 新增`inactive-color`属性 + +### TabbarItem + +- 新增`name`属性 diff --git a/packages/tabbar-item/index.js b/packages/tabbar-item/index.js index ec5d63b51..53ed00b22 100644 --- a/packages/tabbar-item/index.js +++ b/packages/tabbar-item/index.js @@ -13,6 +13,7 @@ export default sfc({ ...routeProps, icon: String, dot: Boolean, + name: [String, Number], info: [String, Number] }, @@ -34,7 +35,7 @@ export default sfc({ methods: { onClick(event) { - this.parent.onChange(this.index); + this.parent.onChange(this.name || this.index); this.$emit('click', event); route(this.$router, this); } diff --git a/packages/tabbar/demo/index.vue b/packages/tabbar/demo/index.vue index c18661944..e6ea163b0 100644 --- a/packages/tabbar/demo/index.vue +++ b/packages/tabbar/demo/index.vue @@ -9,6 +9,35 @@ + + + + {{ $t('tab') }} + + + {{ $t('tab') }} + + + {{ $t('tab') }} + + + {{ $t('tab') }} + + + + {{ $t('tab') }} @@ -69,12 +98,14 @@ export default { 'zh-CN': { badge: '显示徽标', customIcon: '自定义图标', - customColor: '自定义颜色' + customColor: '自定义颜色', + itemName: '通过名称匹配' }, 'en-US': { badge: 'Show Badge', customIcon: 'Custom Icon', - customColor: 'Custom Color' + customColor: 'Custom Color', + itemName: 'Item Name' } }, @@ -84,6 +115,7 @@ export default { 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' diff --git a/packages/tabbar/en-US.md b/packages/tabbar/en-US.md index 626d6fdc2..cd9596524 100644 --- a/packages/tabbar/en-US.md +++ b/packages/tabbar/en-US.md @@ -31,6 +31,27 @@ export default { } ``` +### Item Name + +```html + + Tab + Tab + Tab + Tab + +``` + +```javascript +export default { + data() { + return { + active: 'home' + } + } +} +``` + ### Show Badge ```html @@ -119,7 +140,7 @@ export default { | Attribute | Description | Type | Default | |------|------|------|------| -| v-model | Index of current tab | `Number` | - | +| v-model | Identifier of current tab | `String | Number` | `0` | | fixed | Whether to fixed bottom | `Boolean` | `true` | | z-index | Z-index | `Number` | `1` | | active-color | Color of active tab item | `String` | `#1989fa` | @@ -137,6 +158,7 @@ export default { | 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` | - | diff --git a/packages/tabbar/index.js b/packages/tabbar/index.js index 5261dae7b..43cc31277 100644 --- a/packages/tabbar/index.js +++ b/packages/tabbar/index.js @@ -7,11 +7,14 @@ export default sfc({ mixins: [ParentMixin('vanTabbar')], props: { - value: Number, route: Boolean, activeColor: String, inactiveColor: String, safeAreaInsetBottom: Boolean, + value: { + type: [String, Number], + default: 0 + }, fixed: { type: Boolean, default: true @@ -35,7 +38,7 @@ export default sfc({ methods: { setActiveItem() { this.children.forEach((item, index) => { - item.active = index === this.value; + item.active = (item.name || index) === this.value; }); }, diff --git a/packages/tabbar/test/__snapshots__/demo.spec.js.snap b/packages/tabbar/test/__snapshots__/demo.spec.js.snap index eeb8cfaca..29f1a317b 100644 --- a/packages/tabbar/test/__snapshots__/demo.spec.js.snap +++ b/packages/tabbar/test/__snapshots__/demo.spec.js.snap @@ -34,6 +34,46 @@ exports[`renders demo correctly 1`] = ` +
+
+
+
+ + +
+
+ 标签 +
+
+
+
+ + +
+
+ 标签 +
+
+
+
+ + +
+
+ 标签 +
+
+
+
+ + +
+
+ 标签 +
+
+
+
diff --git a/packages/tabbar/test/index.spec.js b/packages/tabbar/test/index.spec.js index 4ae7219c2..634442c9e 100644 --- a/packages/tabbar/test/index.spec.js +++ b/packages/tabbar/test/index.spec.js @@ -88,3 +88,27 @@ test('click event', () => { expect(onClick).toHaveBeenCalledTimes(1); expect(onChange).toHaveBeenCalledTimes(0); }); + +test('name prop', () => { + const onChange = jest.fn(); + const wrapper = mount({ + template: ` + + Tab + Tab + + `, + data() { + return { + value: 'a' + }; + }, + methods: { + onChange + } + }); + + wrapper.findAll('.van-tabbar-item').at(1).trigger('click'); + + expect(onChange).toHaveBeenCalledWith('b'); +}); diff --git a/packages/tabbar/zh-CN.md b/packages/tabbar/zh-CN.md index 56f52d376..584e374a7 100644 --- a/packages/tabbar/zh-CN.md +++ b/packages/tabbar/zh-CN.md @@ -12,6 +12,8 @@ Vue.use(Tabbar).use(TabbarItem); ### 基础用法 +`v-model`默认绑定选中标签的索引值，通过修改`v-model`即可切换选中的标签 + ```html 标签 @@ -31,6 +33,29 @@ export default { } ``` +### 通过名称匹配 + +在标签指定`name`属性的情况下，`v-model`的值为当前标签的`name` + +```html + + 标签 + 标签 + 标签 + 标签 + +``` + +```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` | - | - |