From f7bd71969df600eddc5f8cf41b639f671220c380 Mon Sep 17 00:00:00 2001
From: Li Chuangbo <im@chuangbo.li>
Date: Fri, 24 Nov 2017 16:10:32 +1300
Subject: [PATCH] [improvement] TabbarItem: add slot-scope to avoid check by
 index (#347)

* [improvement] TabbarItem: add slot-scope to avoid check by index

* [fix] TabbarItem: fix slot-scope on <template> to support vue v2.1.0+
---
 docs/demos/views/tabbar.vue    |  4 +++-
 docs/markdown/en-US/tabbar.md  | 10 +++++++++-
 docs/markdown/zh-CN/tabbar.md  | 10 +++++++++-
 packages/tabbar-item/index.vue |  4 ++--
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/docs/demos/views/tabbar.vue b/docs/demos/views/tabbar.vue
index 33b55c3b7..353ac6a45 100644
--- a/docs/demos/views/tabbar.vue
+++ b/docs/demos/views/tabbar.vue
@@ -13,7 +13,9 @@
       <van-tabbar v-model="active2">
         <van-tabbar-item icon="shop">
           <span>{{ $t('custom') }}</span>
-          <img slot="icon" :src="active2 === 0 ? icon.active : icon.normal" />
+          <template slot="icon" slot-scope="props">
+            <img :src="props.active ? icon.active : icon.normal" />
+          </template>
         </van-tabbar-item>
         <van-tabbar-item icon="chat">{{ $t('tab') }}</van-tabbar-item>
         <van-tabbar-item icon="records">{{ $t('tab') }}</van-tabbar-item>
diff --git a/docs/markdown/en-US/tabbar.md b/docs/markdown/en-US/tabbar.md
index 16cea6418..5b2df10dc 100644
--- a/docs/markdown/en-US/tabbar.md
+++ b/docs/markdown/en-US/tabbar.md
@@ -38,7 +38,9 @@ Use `icon` slot to custom icon
 <van-tabbar v-model="active">
   <van-tabbar-item icon="shop">
     <span>Custom</span>
-    <img slot="icon" :src="active === 0 ? icon.active : icon.normal" />
+    <template slot="icon" slot-scope="props">
+      <img :src="props.active ? icon.active : icon.normal" />
+    </template>
   </van-tabbar-item>
   <van-tabbar-item icon="chat">Tab</van-tabbar-item>
   <van-tabbar-item icon="records">Tab</van-tabbar-item>
@@ -81,3 +83,9 @@ export default {
 | url | Link | `String` | - | - |
 | to | Target route of the link, same as to of `vue-router` | `String | Object` | - | - |
 | replace | If true, the navigation will not leave a history record | `String` | `false` | - |
+
+### TabbarItem Slot
+
+| Name | Description | Scope |
+|-----------|-----------|-----------|
+| icon | Custom icon | active |
diff --git a/docs/markdown/zh-CN/tabbar.md b/docs/markdown/zh-CN/tabbar.md
index e32c9779e..8ad226703 100644
--- a/docs/markdown/zh-CN/tabbar.md
+++ b/docs/markdown/zh-CN/tabbar.md
@@ -41,7 +41,9 @@ export default {
 <van-tabbar v-model="active">
   <van-tabbar-item icon="shop">
     <span>自定义</span>
-    <img slot="icon" :src="active === 0 ? icon.active : icon.normal" />
+    <template slot="icon" slot-scope="props">
+      <img :src="props.active ? icon.active : icon.normal" />
+    </template>
   </van-tabbar-item>
   <van-tabbar-item icon="chat">标签</van-tabbar-item>
   <van-tabbar-item icon="records">标签</van-tabbar-item>
@@ -85,3 +87,9 @@ export default {
 | url | 跳转链接 | `String` | - | - |
 | to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |
 | replace | 跳转时是否替换当前 history | `String` | `false` | - |
+
+### TabbarItem Slot
+
+| Name | 描述 | Scope |
+|-----------|-----------|-----------|
+| icon | 自定义icon | active |
diff --git a/packages/tabbar-item/index.vue b/packages/tabbar-item/index.vue
index d6f968c62..3fa5bd510 100644
--- a/packages/tabbar-item/index.vue
+++ b/packages/tabbar-item/index.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="van-tabbar-item" :class="{ 'van-tabbar-item--active': active }" @click="onClick">
     <div class="van-tabbar-item__icon" :class="{ 'van-tabbar-item__icon-dot': dot }">
-      <slot name="icon">
+      <slot name="icon" :active="active">
         <van-icon v-if="icon" :name="icon" />
       </slot>
       <div v-if="info" class="van-tabbar-item__info">{{ info }}</div>
     </div>
     <div class="van-tabbar-item__text">
-      <slot></slot>
+      <slot :active="active"></slot>
     </div>
   </div>
 </template>