feat(Tab): improve the prop of Tab (#2082)

example/pages/tab/index.js

@@ -3,19 +3,24 @@ import Page from '../../common/page';
 Page({
   data: {
     tabs: [1, 2, 3, 4],
-    tabsMore: [1, 2, 3, 4, 5, 6, 7, 8]
+    tabsMore: [1, 2, 3, 4, 5, 6, 7, 8],
+    tabsWithName: [
+      { name: 'a', index: 1 },
+      { name: 'b', index: 2 },
+      { name: 'c', index: 3 }
+    ]
   },
 
   onClickDisabled(event) {
     wx.showToast({
-      title: `标签 ${event.detail.index + 1} 已被禁用`,
+      title: `标签 ${event.detail.name} 已被禁用`,
       icon: 'none'
     });
   },
 
   onChange(event) {
     wx.showToast({
-      title: `切换到标签 ${event.detail.index + 1}`,
+      title: `切换到标签 ${event.detail.name}`,
       icon: 'none'
     });
   },
@@ -29,7 +34,7 @@ Page({
 
   onClick(event) {
     wx.showToast({
-      title: `点击标签 ${event.detail.index + 1}`,
+      title: `点击标签 ${event.detail.name}`,
       icon: 'none'
     });
   }

example/pages/tab/index.wxml

@@ -3,7 +3,7 @@
     <van-tab
       wx:for="1234"
       wx:key="index"
-      title="{{ '标签' + item }}"
+      title="{{ '标签 ' + item }}"
     >
       <view class="content">
         {{ '内容' + item }}
@@ -12,12 +12,27 @@
   </van-tabs>
 </demo-block>
 
+<demo-block title="通过名称匹配">
+  <van-tabs active="a">
+    <van-tab
+      wx:for="{{ tabsWithName }}"
+      wx:key="index"
+      name="{{ item.name }}"
+      title="{{ '标签 ' + item.index }}"
+    >
+      <view class="content">
+        {{ '内容' + item.index}}
+      </view>
+    </van-tab>
+  </van-tabs>
+</demo-block>
+
 <demo-block title="横向滚动">
   <van-tabs>
     <van-tab
       wx:for="123456"
       wx:key="index"
-      title="{{ '标签' + item }}"
+      title="{{ '标签 ' + item }}"
     >
       <view class="content">
         {{ '内容' + item }}
@@ -32,7 +47,7 @@
       wx:for="123"
       wx:key="index"
       disabled="{{ index === 1 }}"
-      title="{{ '标签' + item }}"
+      title="{{ '标签 ' + item }}"
     >
       <view class="content">
         {{ '内容' + item }}
@@ -46,7 +61,7 @@
     <van-tab
       wx:for="123"
       wx:key="index"
-      title="{{ '标签' + item }}"
+      title="{{ '标签 ' + item }}"
     >
       <view class="content-2">
         {{ '内容' + item }}
@@ -60,7 +75,7 @@
     <van-tab
       wx:for="12"
       wx:key="index"
-      title="{{ '标签' + item }}"
+      title="{{ '标签 ' + item }}"
     >
       <view class="content">
         {{ '内容' + item }}
@@ -74,7 +89,7 @@
     <van-tab
       wx:for="1234"
       wx:key="index"
-      title="{{ '标签' + item }}"
+      title="{{ '标签 ' + item }}"
     >
       <view class="content">
         {{ '内容' + item }}
@@ -88,7 +103,7 @@
     <van-tab
       wx:for="1234"
       wx:key="index"
-      title="{{ '标签' + item }}"
+      title="{{ '标签 ' + item }}"
     >
       <view class="content">
         {{ '内容' + item }}
@@ -102,7 +117,7 @@
     <van-tab
       wx:for="1234"
       wx:key="index"
-      title="{{ '标签' + item }}"
+      title="{{ '标签 ' + item }}"
     >
       <view class="content">
         {{ '内容' + item }}
@@ -122,7 +137,7 @@
     <van-tab
       wx:for="1234"
       wx:key="index"
-      title="{{ '标签' + item }}"
+      title="{{ '标签 ' + item }}"
       dot="{{ index === 1 }}"
       info="{{ index === 2 ? 99 : null }}"
     >

packages/common/utils.ts

@@ -8,7 +8,7 @@ export function isObj(x: any): boolean {
 }
 
 export function isNumber(value) {
-  return /^\d+$/.test(value);
+  return /^\d+(\.\d+)?$/.test(value);
 }
 
 export function range(num: number, min: number, max: number) {

packages/tab/README.md

@@ -15,7 +15,7 @@
 
 ### 基础用法
 
-默认情况下启用第一个标签，可以通过`active`设定当前激活的标签索引，在回调参数的`event.detail`中可以取得被点击标签的标题和索引
+通过`active`设定当前激活标签对应的索引值，默认情况下启用第一个标签
 
 ```html
 <van-tabs active="{{ active }}" bind:change="onChange">
@@ -34,13 +34,25 @@ Page({
 
   onChange(event) {
     wx.showToast({
-      title: `切换到标签 ${event.detail.index + 1}`,
+      title: `切换到标签 ${event.detail.name}`,
       icon: 'none'
     });
   }
 });
 ```
 
+### 通过名称匹配
+
+在标签指定`name`属性的情况下，`active`的值为当前标签的`name`，默认启用第一个标签
+
+```html
+<van-tabs active="a">
+  <van-tab title="标签 1" name="a">内容 1</van-tab>
+  <van-tab title="标签 2" name="b">内容 2</van-tab>
+  <van-tab title="标签 3" name="c">内容 3</van-tab>
+</van-tabs>
+```
+
 ### 横向滚动
 
 多于 4 个标签时，Tab 可以横向滚动
@@ -72,7 +84,7 @@ Page({
 Page({
   onClickDisabled(event) {
     wx.showToast({
-      title: `标签 ${event.detail.index + 1} 已被禁用`,
+      title: `标签 ${event.detail.name} 已被禁用`,
       icon: 'none'
     });
   }
@@ -93,7 +105,7 @@ Page({
 
 ### 点击事件
 
-可以在`van-tabs`上绑定`click`事件，在回调参数的`event.detail`中可以取得被点击标签的标题和索引
+可以在`van-tabs`上绑定`click`事件，在回调参数的`event.detail`中可以取得被点击标签的标题和标识符
 
 ```html
 <van-tabs bind:click="onClick">
@@ -106,7 +118,7 @@ Page({
 Page({
   onClick(event) {
     wx.showToast({
-      title: `点击标签 ${event.detail.index + 1}`,
+      title: `点击标签 ${event.detail.name}`,
       icon: 'none'
     });
   }
@@ -158,13 +170,14 @@ Page({
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |-----------|-----------|-----------|-------------|-------------|
-| active | 当前激活标签的索引 | *number* | `0` | - |
+| active | 当前选中标签的标识符 | *string \| number* | `0` | - |
 | color | 标签颜色 | *string* | `#ee0a24` | - |
 | z-index | z-index 层级 | *number* | `1` | - |
 | type | 样式风格，可选值为`card` | *string* | `line` | - |
 | border | 是否展示外边框，仅在`line`风格下生效 | *boolean* | `true` | - |
 | duration | 动画时间 (单位秒)  | *number* | `0.3` | - |
-| line-width | 底部条宽度 (px) | *number* | 与当前标签等宽 | - |
+| line-width | 底部条宽度 (px) | *string \| number* | 与当前标签等宽 | - |
+| line-height | 底部条高度 (px) | *string \| number* | `3px` | - |
 | swipe-threshold | 滚动阈值，设置标签数量超过多少个可滚动 | *number* | `4` | - |
 | animated | 是否使用动画切换 Tabs | *boolean* | `false` | - |
 | swipeable | 是否开启手势滑动切换 | *boolean* | `false` | - |
@@ -174,6 +187,7 @@ Page({
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |-----------|-----------|-----------|-------------|-------------|
+| name | 标签名称，作为匹配的标识符 | *string \| number* | 标签的索引值 | - |
 | title | 标题 | *string* | - | - |
 | disabled | 是否禁用标签 | *boolean* | `false` | - |
 | dot | 是否显示小红点 | *boolean* | - | - |
@@ -197,9 +211,9 @@ Page({
 
 | 事件名 | 说明 | 参数 |
 |-----------|-----------|-----------|
-| bind:click | 点击标签时触发 | index：标签索引，title：标题 |
+| bind:click | 点击标签时触发 | name：标签标识符，title：标题 |
-| bind:change | 当前激活的标签改变时触发 | index：标签索引，title：标题 |
+| bind:change | 当前激活的标签改变时触发 | name：标签标识符，title：标题 |
-| bind:disabled | 点击被禁用的标签时触发 | index：标签索引，title：标题 |
+| bind:disabled | 点击被禁用的标签时触发 | name：标签标识符，title：标题 |
 | bind:scroll | 滚动时触发 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } |
 
 ### 外部样式类

packages/tab/index.ts

@@ -11,7 +11,12 @@ VantComponent({
     info: null,
     title: String,
     disabled: Boolean,
-    titleStyle: String
+    titleStyle: String,
+    name: {
+      type: [Number, String],
+      value: '',
+      observer: 'setComputedName'
+    }
   },
 
   data: {
@@ -30,6 +35,10 @@ VantComponent({
   },
 
   methods: {
+    setComputedName() {
+      this.computedName = this.data.name || this.index;
+    },
+
     update() {
       const parent = this.getRelationNodes('../tabs/index')[0];
       if (parent) {

packages/tabs/index.less

@@ -124,18 +124,6 @@
   }
 
   &__title {
-    &--dot {
-      &::after {
-        display: inline-block;
-        width: 8px;
-        height: 8px;
-        vertical-align: middle;
-        border-radius: 100%;
-        content: '';
-        .theme(background-color, '@red');
-      }
-    }
-
     &__info {
       position: relative !important;
       top: -1px !important;

packages/tabs/index.ts

@@ -1,13 +1,14 @@
 import { VantComponent } from '../common/component';
 import { touch } from '../mixins/touch';
 import { Weapp } from 'definitions/weapp';
-import { nextTick } from '../common/utils';
+import { nextTick, isDef, addUnit } from '../common/utils';
 
 type TabItemData = {
   width?: number
   active: boolean
   inited?: boolean
   animated?: boolean
+  name?: string | number
 };
 
 type Position = 'top' | 'bottom' | '';
@@ -21,14 +22,25 @@ VantComponent({
     name: 'tab',
     type: 'descendant',
     linked(child) {
-      this.child.push(child);
+      child.index = this.children.length;
+      child.setComputedName();
+      this.children.push(child);
       this.updateTabs(this.data.tabs.concat(child.data));
     },
     unlinked(child) {
-      const index = this.child.indexOf(child);
+      const index = this.children.indexOf(child);
       const { tabs } = this.data;
       tabs.splice(index, 1);
-      this.child.splice(index, 1);
+      this.children.splice(index, 1);
+
+      let i = index;
+      while (i >= 0 && i < this.children.length) {
+        const currentChild = this.children[i];
+        currentChild.index--;
+        currentChild.setComputedName();
+        i++;
+      }
+
       this.updateTabs(tabs);
     }
   },
@@ -39,16 +51,16 @@ VantComponent({
     animated: Boolean,
     swipeable: Boolean,
     lineWidth: {
-      type: Number,
+      type: [String, Number],
       value: -1
     },
     lineHeight: {
-      type: Number,
+      type: [String, Number],
       value: -1
     },
     active: {
-      type: Number,
+      type: [String, Number],
-      value: 0
+      value: 0,
     },
     type: {
       type: String,
@@ -83,13 +95,14 @@ VantComponent({
     scrollable: false,
     trackStyle: '',
     wrapStyle: '',
-    position: ''
+    position: '',
+    currentIndex: null,
   },
 
   watch: {
     swipeThreshold() {
       this.setData({
-        scrollable: this.child.length > this.data.swipeThreshold
+        scrollable: this.children.length > this.data.swipeThreshold
       });
     },
     color: 'setLine',
@@ -101,14 +114,13 @@ VantComponent({
   },
 
   beforeCreate() {
-    this.child = [];
+    this.children = [];
   },
 
   mounted() {
     this.setLine(true);
     this.setTrack();
     this.scrollIntoView();
-
     this.getRect('.van-tabs__wrap').then(
       (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
         this.navHeight = rect.height;
@@ -132,27 +144,30 @@ VantComponent({
       this.setActiveTab();
     },
 
-    trigger(eventName: string, index: number) {
+    trigger(eventName: string, name: string | number) {
+      const { tabs, currentIndex } = this.data;
+
       this.$emit(eventName, {
-        index,
+        name,
-        title: this.data.tabs[index].title
+        title: tabs[currentIndex].title
       });
     },
 
     onTap(event: Weapp.Event) {
       const { index } = event.currentTarget.dataset;
+      const child = this.children[index];
       if (this.data.tabs[index].disabled) {
-        this.trigger('disabled', index);
+        this.trigger('disabled', child.computedName);
       } else {
-        this.trigger('click', index);
+        this.trigger('click', child.computedName);
-        this.setActive(index);
+        this.setActive(child.computedName);
       }
     },
 
-    setActive(active: number) {
+    setActive(computedName) {
-      if (active !== this.data.active) {
+      if (computedName !== this.currentName) {
-        this.trigger('change', active);
+        this.currentName = computedName;
-        this.setData({ active });
+        this.trigger('change', computedName);
         this.setActiveTab();
       }
     },
@@ -162,16 +177,16 @@ VantComponent({
         return;
       }
 
-      const { color, active, duration, lineWidth, lineHeight } = this.data;
+      const { color, duration, currentIndex, lineWidth, lineHeight } = this.data;
 
       this.getRect('.van-tab', true).then(
         (rects: WechatMiniprogram.BoundingClientRectCallbackResult[]) => {
-          const rect = rects[active];
+          const rect = rects[currentIndex];
           const width = lineWidth !== -1 ? lineWidth : rect.width / 2;
-          const height = lineHeight !== -1 ? `height: ${lineHeight}px;` : '';
+          const height = lineHeight !== -1 ? `height: ${addUnit(lineHeight)}; border-radius: ${addUnit(lineHeight)};` : '';
 
           let left = rects
-            .slice(0, active)
+            .slice(0, currentIndex)
             .reduce((prev, curr) => prev + curr.width, 0);
 
           left += (rect.width - width) / 2;
@@ -183,7 +198,7 @@ VantComponent({
           this.setData({
             lineStyle: `
             ${height}
-            width: ${width}px;
+            width: ${addUnit(width)};
             background-color: ${color};
             -webkit-transform: translateX(${left}px);
             transform: translateX(${left}px);
@@ -195,7 +210,7 @@ VantComponent({
     },
 
     setTrack() {
-      const { animated, active, duration } = this.data;
+      const { animated, duration, currentIndex } = this.data;
 
       if (!animated) return '';
 
@@ -205,8 +220,8 @@ VantComponent({
 
           this.setData({
             trackStyle: `
-              width: ${width * this.child.length}px;
+              width: ${width * this.children.length}px;
-              left: ${-1 * active * width}px;
+              left: ${-1 * currentIndex * width}px;
               transition: left ${duration}s;
               display: -webkit-box;
               display: flex;
@@ -215,7 +230,7 @@ VantComponent({
 
           const data = { width, animated };
 
-          this.child.forEach((item: WechatMiniprogram.Component.TrivialInstance) => {
+          this.children.forEach((item: WechatMiniprogram.Component.TrivialInstance) => {
             item.setData(data);
           });
         }
@@ -223,12 +238,19 @@ VantComponent({
     },
 
     setActiveTab() {
-      this.child.forEach((item: WechatMiniprogram.Component.TrivialInstance, index: number) => {
+      if (!isDef(this.currentName)) {
+        this.currentName = this.data.active || this.children[0].computedName;
+      }
+
+      this.children.forEach((item: WechatMiniprogram.Component.TrivialInstance, index: number) => {
         const data: TabItemData = {
-          active: index === this.data.active
+          active: item.computedName === this.currentName
         };
 
         if (data.active) {
+          this.setData({
+            currentIndex: index
+          });
           data.inited = true;
         }
 
@@ -246,7 +268,7 @@ VantComponent({
 
     // scroll active tab into view
     scrollIntoView() {
-      const { active, scrollable } = this.data;
+      const { currentIndex, scrollable } = this.data;
 
       if (!scrollable) {
         return;
@@ -260,9 +282,9 @@ VantComponent({
         WechatMiniprogram.BoundingClientRectCallbackResult[],
         WechatMiniprogram.BoundingClientRectCallbackResult
         ]) => {
-          const tabRect = tabRects[active];
+          const tabRect = tabRects[currentIndex];
           const offsetLeft = tabRects
-            .slice(0, active)
+            .slice(0, currentIndex)
             .reduce((prev, curr) => prev + curr.width, 0);
 
           this.setData({
@@ -288,16 +310,16 @@ VantComponent({
     onTouchEnd() {
       if (!this.data.swipeable) return;
 
-      const { active, tabs } = this.data;
+      const { tabs, currentIndex } = this.data;
 
       const { direction, deltaX, offsetX } = this;
       const minSwipeDistance = 50;
 
       if (direction === 'horizontal' && offsetX >= minSwipeDistance) {
-        if (deltaX > 0 && active !== 0) {
+        if (deltaX > 0 && currentIndex !== 0) {
-          this.setActive(active - 1);
+          this.setActive(this.children[currentIndex - 1].computedName);
-        } else if (deltaX < 0 && active !== tabs.length - 1) {
+        } else if (deltaX < 0 && currentIndex !== tabs.length - 1) {
-          this.setActive(active + 1);
+          this.setActive(this.children[currentIndex + 1].computedName);
         }
       }
     },

packages/tabs/index.wxml

@@ -17,15 +17,16 @@
           wx:for="{{ tabs }}"
           wx:key="index"
           data-index="{{ index }}"
-          class="van-ellipsis tab-class {{ index === active ? 'tab-active-class' : '' }} {{ utils.bem('tab', { active: index === active, disabled: item.disabled }) }}"
+          class="van-ellipsis tab-class {{ index === currentIndex ? 'tab-active-class' : '' }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled }) }}"
-          style="{{ color && index !== active && type === 'card' && !item.disabled ? 'color: ' + color : '' }} {{ color && index === active && type === 'card' ? ';background-color:' + color : '' }} {{ color ? ';border-color: ' + color : '' }} {{ scrollable ? ';flex-basis:' + (88 / swipeThreshold) + '%' : '' }}"
+          style="{{ color && index !== currentIndex && type === 'card' && !item.disabled ? 'color: ' + color : '' }} {{ color && index === currentIndex && type === 'card' ? ';background-color:' + color : '' }} {{ color ? ';border-color: ' + color : '' }} {{ scrollable ? ';flex-basis:' + (88 / swipeThreshold) + '%' : '' }}"
           bind:tap="onTap"
         >
-          <view class="van-ellipsis {{ utils.bem('tab__title', { dot: item.dot }) }}" style="{{ item.titleStyle }}">
+          <view class="van-ellipsis" style="{{ item.titleStyle }}">
             {{ item.title }}
             <van-info
-              wx:if="{{ item.info !== null }}"
+              wx:if="{{ item.info !== null || item.dot }}"
               info="{{ item.info }}"
+              dot="{{ item.dot }}"
               custom-class="van-tab__title__info"
             />
           </view>