From 28f89153766bb52e7f6fbed3ca23b3c539354fa5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E4=BA=9A=E8=BE=89?= <liangyahui@didiglobal.com>
Date: Fri, 5 Feb 2021 17:15:31 +0800
Subject: [PATCH] <feat>: let tabbar can use slot for icon

---
 src/tabbar/tabbar.ts                  | 3 ++-
 src/tabbar/tabbar.wxml                | 8 ++++++--
 tools/demo/example/tabbar/tabbar.js   | 2 ++
 tools/demo/example/tabbar/tabbar.json | 3 ++-
 tools/demo/example/tabbar/tabbar.wxml | 7 ++++++-
 5 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/tabbar/tabbar.ts b/src/tabbar/tabbar.ts
index 487422b..df5adc7 100644
--- a/src/tabbar/tabbar.ts
+++ b/src/tabbar/tabbar.ts
@@ -1,6 +1,7 @@
 Component({
     options: {
-        addGlobalClass: true
+        addGlobalClass: true,
+        multipleSlots: true
     },
     properties: {
         extClass: {
diff --git a/src/tabbar/tabbar.wxml b/src/tabbar/tabbar.wxml
index e7270e2..7ab1fd4 100644
--- a/src/tabbar/tabbar.wxml
+++ b/src/tabbar/tabbar.wxml
@@ -2,9 +2,13 @@
   <!-- 选中的时候往 weui-tabbar__item 加 class:weui-bar__item_on -->
   <view data-index='{{index}}' bindtap="tabChange" wx:for="{{list}}" wx:key="index" class="weui-tabbar__item {{index === current ? 'weui-bar__item_on' : ''}}">
     <view style="position: relative;display:inline-block;">
-      <image src="{{current === index ? item.selectedIconPath : item.iconPath}}" class="weui-tabbar__icon"></image>
+      <view wx:if="{{item.slotIcon !=undefined ||item.selectSlotIcon != undefined}}" class="weui-tabbar__icon">
+        <slot wx:if="{{current !== index}}" name="{{item.slotIcon}}"></slot>
+        <slot wx:if="{{current === index}}" name="{{item.selectSlotIcon}}"></slot>
+      </view>
+      <image wx:else src="{{current === index ? item.selectedIconPath : item.iconPath}}" class="weui-tabbar__icon"></image>
       <mp-badge wx:if="{{item.badge || item.dot}}" content="{{item.badge}}" style="position: absolute;top:-2px;left:calc(100% - 3px)"></mp-badge>
     </view>
     <view class="weui-tabbar__label">{{item.text}}</view>
   </view>
-</view>
\ No newline at end of file
+</view>
diff --git a/tools/demo/example/tabbar/tabbar.js b/tools/demo/example/tabbar/tabbar.js
index 36a0b37..45cb027 100644
--- a/tools/demo/example/tabbar/tabbar.js
+++ b/tools/demo/example/tabbar/tabbar.js
@@ -7,6 +7,8 @@ CustomPage({
         list: [
             {
                 text: '微信',
+                slotIcon: "wx",
+                selectSlotIcon: "selwx",
                 iconPath: app.globalData.iconTabbar,
                 selectedIconPath: app.globalData.iconTabbar,
                 badge: '8'
diff --git a/tools/demo/example/tabbar/tabbar.json b/tools/demo/example/tabbar/tabbar.json
index 8a83afd..61008f8 100644
--- a/tools/demo/example/tabbar/tabbar.json
+++ b/tools/demo/example/tabbar/tabbar.json
@@ -1,5 +1,6 @@
 {
   "usingComponents": {
-    "mp-tabbar": "../../components/tabbar/tabbar"
+    "mp-tabbar": "../../components/tabbar/tabbar",
+    "mp-icon": "../../components/icon/icon"
   }
 }
\ No newline at end of file
diff --git a/tools/demo/example/tabbar/tabbar.wxml b/tools/demo/example/tabbar/tabbar.wxml
index e9d4850..97274e3 100644
--- a/tools/demo/example/tabbar/tabbar.wxml
+++ b/tools/demo/example/tabbar/tabbar.wxml
@@ -3,5 +3,10 @@
         <view class="page__title">Tabbar</view>
         <view class="page__desc">类似小程序原生tabbar的组件，可用于自定义tabbar</view>
     </view>
-    <mp-tabbar class="tabbar" list="{{list}}" bindchange="tabChange"></mp-tabbar>
+    <mp-tabbar class="tabbar" list="{{list}}" bindchange="tabChange">
+        <block wx:for="{{list}}" wx:key="index">
+            <mp-icon slot="{{item.slotIcon}}" color="white" icon="add"></mp-icon>
+            <mp-icon slot="{{item.selectSlotIcon}}" color="green" icon="add"></mp-icon>
+        </block>
+    </mp-tabbar>
 </view>
\ No newline at end of file