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

packages/tabbar-item/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     :class="b({ active })"
+    :style="style"
     @click="onClick"
   >
     <div :class="b('icon', { dot })">
@@ -47,6 +48,12 @@ export default create({
     };
   },
 
+  computed: {
+    style() {
+      return this.active ? { color: this.$parent.activeColor } : null;
+    }
+  },
+
   beforeCreate() {
     this.$parent.items.push(this);
   },

packages/tabbar/demo/index.vue

@@ -24,7 +24,7 @@
       </van-tabbar>
     </demo-block>
 
-    <demo-block :title="$t('title2')">
+    <demo-block :title="$t('customIcon')">
       <van-tabbar v-model="active2">
         <van-tabbar-item info="3">
           <span>{{ $t('custom') }}</span>
@@ -38,6 +38,18 @@
         <van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
       </van-tabbar>
     </demo-block>
+
+    <demo-block :title="$t('customColor')">
+      <van-tabbar
+        v-model="active3"
+        active-color="#4b0"
+      >
+        <van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="friends-o">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
+      </van-tabbar>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -45,10 +57,12 @@
 export default {
   i18n: {
     'zh-CN': {
-      title2: '自定义图标'
+      customIcon: '自定义图标',
+      customColor: '自定义颜色'
     },
     'en-US': {
-      title2: 'Custom icon'
+      customIcon: 'Custom icon',
+      customColor: 'Custom Color'
     }
   },
 
@@ -56,6 +70,7 @@ export default {
     return {
       active: 0,
       active2: 0,
+      active3: 0,
       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,7 @@ export default {
 ```
 
 #### Custom icon
+
 Use `icon` slot to custom icon
 
 ```html
@@ -69,6 +70,7 @@ export default {
 | v-model | Index of current tab | `Number` | - |
 | fixed | Whether to fixed bottom | `Boolean` | `true` |
 | z-index | Z-index | `Number` | `1` |
+| active-color | Color of active tab item | `String` | `#1989fa` |
 
 ### Tabbar Event
 

packages/tabbar/index.vue

@@ -22,6 +22,7 @@ export default create({
 
   props: {
     value: Number,
+    activeColor: String,
     fixed: {
       type: Boolean,
       default: true

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

@@ -76,5 +76,41 @@ 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">
+        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o" style="color:undefined;font-size:undefined;">
+            <!---->
+            <!----></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" style="color:undefined;font-size:undefined;">
+            <!---->
+            <!----></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" style="color:undefined;font-size:undefined;">
+            <!---->
+            <!----></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" style="color:undefined;font-size:undefined;">
+            <!---->
+            <!----></i>
+          <!---->
+        </div>
+        <div class="van-tabbar-item__text">标签</div>
+      </div>
+    </div>
+  </div>
 </div>
 `;

packages/tabbar/zh-CN.md

@@ -11,7 +11,6 @@ Vue.use(Tabbar).use(TabbarItem);
 
 #### 基础用法
 
-
 ```html
 <van-tabbar v-model="active">
   <van-tabbar-item icon="home-o">标签</van-tabbar-item>
@@ -33,6 +32,7 @@ export default {
 
 
 #### 自定义图标
+
 通过 icon 插槽自定义图标，可以通过 `slot-scope` 判断标签是否选中
 
 ```html
@@ -64,6 +64,19 @@ export default {
 }
 ```
 
+#### 自定义颜色
+
+```html
+<van-tabbar
+  v-model="active"
+  active-color="#4b0"
+>
+  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
+  <van-tabbar-item icon="search">标签</van-tabbar-item>
+  <van-tabbar-item icon="freinds-o"">标签</van-tabbar-item>
+  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
+</van-tabbar>
+```
 
 ### Tabbar API
 
@@ -72,6 +85,7 @@ export default {
 | v-model | 当前选中标签的索引 | `Number` | - | - |
 | fixed | 是否固定在底部 | `Boolean` | `true` | - |
 | z-index | 元素 z-index | `Number` | `1` | 1.1.9 |
+| active-color | 选中标签的颜色 | `String` | `#1989fa` | 1.5.1 |
 
 ### Tabbar Event