[new feature] Tabbar: add active-color prop (#1145)

example/pages/tabbar/index.wxml

@@ -1,5 +1,10 @@
 <demo-block title="基础用法">
-  <van-tabbar active="{{ active }}" custom-class="tabbar" bind:change="onChange" safe-area-inset-bottom="{{ false }}">
+  <van-tabbar
+    active="{{ active }}"
+    custom-class="tabbar"
+    safe-area-inset-bottom="{{ false }}"
+    bind:change="onChange"
+  >
     <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>
@@ -8,13 +13,41 @@
 </demo-block>
 
 <demo-block title="自定义图标">
-  <van-tabbar active="{{ active2 }}" custom-class="tabbar" bind:change="onChange" safe-area-inset-bottom="{{ false }}">
+  <van-tabbar
+    active="{{ active2 }}"
+    custom-class="tabbar"
+    safe-area-inset-bottom="{{ false }}"
+    bind:change="onChange"
+  >
     <van-tabbar-item info="3">
-      <span>自定义</span>
+      <image
-      <image slot="icon" src="{{ icon.normal }}" class="icon" mode="aspectFit" />
+        slot="icon"
-      <image slot="icon-active" src="{{ icon.active }}" mode="aspectFit" />
+        src="{{ icon.normal }}"
+        mode="aspectFit"
+      />
+      <image
+        slot="icon-active"
+        src="{{ icon.active }}"
+        mode="aspectFit"
+      />
+      自定义
     </van-tabbar-item>
     <van-tabbar-item icon="search">标签</van-tabbar-item>
     <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
   </van-tabbar>
 </demo-block>
+
+<demo-block title="自定义颜色">
+  <van-tabbar
+    active="{{ active }}"
+    custom-class="tabbar"
+    safe-area-inset-bottom="{{ false }}"
+    active-color="#4b0"
+    bind:change="onChange"
+  >
+    <van-tabbar-item icon="home-o">标签</van-tabbar-item>
+    <van-tabbar-item icon="search">标签</van-tabbar-item>
+    <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
+    <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
+  </van-tabbar>
+</demo-block>

packages/tabbar-item/index.ts

@@ -25,9 +25,9 @@ VantComponent({
       this.$emit('click');
     },
 
-    setActive(active) {
+    setActive({ active, color }) {
       if (this.data.active !== active) {
-        this.set({ active });
+        this.set({ active, color });
       }
     }
   }

packages/tabbar-item/index.wxml

@@ -1,5 +1,6 @@
 <view
   class="van-tabbar-item {{ active ? 'van-tabbar-item--active' : '' }}"
+  style="{{ active && color ? 'color: ' + color : '' }}"
   bind:tap="onClick"
 >
   <view class="van-tabbar-item__icon {{ dot ? 'van-tabbar-item__icon--dot' : '' }}">

packages/tabbar/README.md

@@ -13,7 +13,6 @@
 
 #### 基础用法
 
-
 ```html
 <van-tabbar active="{{ active }}" bind:change="onChange">
   <van-tabbar-item icon="home-o">标签</van-tabbar-item>
@@ -35,7 +34,6 @@ Page({
 });
 ```
 
-
 #### 自定义图标
 
 可以通过 slot 自定义图标，其中 icon slot 代表未选中状态下的图标，icon-active slot 代表选中状态下的图标
@@ -43,9 +41,17 @@ Page({
 ```html
 <van-tabbar active="{{ active }}" bind:change="onChange">
   <van-tabbar-item info="3">
-    <span>自定义</span>
+    <image
-    <image slot="icon" src="{{ icon.normal }}" class="icon" mode="aspectFit" />
+      slot="icon"
-    <image slot="icon-active" src="{{ icon.active }}" mode="aspectFit" />
+      src="{{ icon.normal }}"
+      mode="aspectFit"
+    />
+    <image
+      slot="icon-active"
+      src="{{ icon.active }}"
+      mode="aspectFit"
+    />
+    自定义
   </van-tabbar-item>
   <van-tabbar-item icon="search">标签</van-tabbar-item>
   <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
@@ -68,11 +74,39 @@ Page({
 });
 ```
 
+#### 自定义颜色
+
+```html
+<van-tabbar
+  active="{{ active }}"
+  active-color="#4b0"
+  bind:change="onChange"
+>
+  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
+  <van-tabbar-item icon="search">标签</van-tabbar-item>
+  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
+  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
+</van-tabbar>
+```
+
+```javascript
+Page({
+  data: {
+    active: 0
+  },
+  // event.detail 的值为当前选中项的索引
+  onChange(event) {
+    console.log(event.detail);
+  }
+});
+```
+
 ### Tabbar API
 
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|
 | active | 当前选中标签的索引 | `Number` | - |
+| active-color | 选中标签的颜色 | `String` | `#1989fa` |
 | fixed | 是否固定在底部 | `Boolean` | `true` |
 | z-index | 元素 z-index | `Number` | `1` |
 | safe-area-inset-bottom | 是否适配iPhoneX | `Boolean` | `true` |

packages/tabbar/index.ts

@@ -23,6 +23,7 @@ VantComponent({
 
   props: {
     active: Number,
+    activeColor: String,
     fixed: {
       type: Boolean,
       value: true
@@ -52,7 +53,10 @@ VantComponent({
   methods: {
     setActiveItem() {
       this.data.items.forEach((item, index) => {
-        item.setActive(index === this.data.currentActive);
+        item.setActive({
+          active: index === this.data.currentActive,
+          color: this.data.activeColor
+        });
       });
     },