[new feature] TabbarItem: add name prop

docs/markdown/v2-progress-tracking.md

@@ -163,3 +163,7 @@
 
 - 新增`route`属性
 - 新增`inactive-color`属性
+
+### TabbarItem
+
+- 新增`name`属性

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);
     }

packages/tabbar/demo/index.vue

@@ -9,6 +9,35 @@
       </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>
@@ -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'

packages/tabbar/en-US.md

@@ -31,6 +31,27 @@ export default {
 }
 ```
 
+### 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
@@ -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` | - |

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;
       });
     },
 

packages/tabbar/test/__snapshots__/demo.spec.js.snap

@@ -34,6 +34,46 @@ exports[`renders demo correctly 1`] = `
       </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">

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: `
+      <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');
+});

packages/tabbar/zh-CN.md

@@ -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` | - | - |