fix(tabbar): 新增支持自定义图片链接 (#620)

* fix(tabbar): 新增支持自定义图片链接

src/packages/__VUE/tabbar/demo.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="demo full">
     <h2>基础用法</h2>
+
     <nut-tabbar @tab-switch="tabSwitch">
       <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
       <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
@@ -8,9 +9,38 @@
       <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
       <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
     </nut-tabbar>
+    <h2>自定义图片</h2>
+
+    <nut-tabbar @tab-switch="tabSwitch">
+      <nut-tabbar-item
+        tab-title="首页"
+        img="http://img13.360buyimg.com/uba/jfs/t1/29316/38/1115/3203/5c0f3d61E35d0c7da/9e557f2cb5c9dab6.jpg"
+        activeImg="http://img20.360buyimg.com/uba/jfs/t1/9996/36/8646/4833/5c0f3d61E7c1b7e0f/c98ad61124172e93.jpg"
+      ></nut-tabbar-item>
+      <nut-tabbar-item
+        tab-title="分类"
+        img="http://img12.360buyimg.com/uba/jfs/t1/25443/23/1062/4600/5c0f3d61E2e9f1360/c9b3421fe18614e2.jpg"
+        activeImg="http://img20.360buyimg.com/uba/jfs/t1/19241/12/1048/8309/5c0f3d61E17ed5a56/c3af0964cade47f8.jpg"
+      ></nut-tabbar-item>
+      <nut-tabbar-item
+        tab-title="发现"
+        img="http://img13.360buyimg.com/uba/jfs/t1/10361/35/4713/4643/5c0f3d62E437a3c94/273fd0fb90798f03.jpg"
+        activeImg="http://img14.360buyimg.com/uba/jfs/t1/26604/35/1073/7896/5c0f3d61Eb9f5f184/5f01c938abe4216d.jpg"
+      ></nut-tabbar-item>
+      <nut-tabbar-item
+        tab-title="购物车"
+        img="http://img11.360buyimg.com/uba/jfs/t1/14848/18/1066/3723/5c0f41bdE9f2a38fe/e6ed6768717297fb.jpg"
+        activeImg="http://img30.360buyimg.com/uba/jfs/t1/17538/16/1070/6214/5c0f41bdE4bc9a1db/74cf978e5015454b.jpg"
+      ></nut-tabbar-item>
+      <nut-tabbar-item
+        tab-title="我的"
+        img="http://img20.360buyimg.com/uba/jfs/t1/20004/20/1045/3620/5c0f3d61Eaaec1670/9e59db63983b7b9f.jpg"
+        activeImg="http://img14.360buyimg.com/uba/jfs/t1/23967/14/1072/6714/5c0f3d61E0ad8991e/8f741953f6e38f15.jpg"
+      ></nut-tabbar-item>
+    </nut-tabbar>
 
     <h2>自定义选中</h2>
-    <nut-tabbar v-model:visible="active">
+    <nut-tabbar v-model:visible="active" size="18px">
       <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
       <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
       <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>

src/packages/__VUE/tabbar/doc.md

@@ -42,6 +42,32 @@ setup() {
 },
 ```
 
+### 自定义图片链接
+```html
+<nut-tabbar @tab-switch="tabSwitch">
+  <nut-tabbar-item tab-title="首页"
+          img= 'http://img13.360buyimg.com/uba/jfs/t1/29316/38/1115/3203/5c0f3d61E35d0c7da/9e557f2cb5c9dab6.jpg'
+           activeImg='http://img20.360buyimg.com/uba/jfs/t1/9996/36/8646/4833/5c0f3d61E7c1b7e0f/c98ad61124172e93.jpg'
+      ></nut-tabbar-item>
+  <nut-tabbar-item tab-title="分类" 
+          img="http://img12.360buyimg.com/uba/jfs/t1/25443/23/1062/4600/5c0f3d61E2e9f1360/c9b3421fe18614e2.jpg"
+          activeImg='http://img20.360buyimg.com/uba/jfs/t1/19241/12/1048/8309/5c0f3d61E17ed5a56/c3af0964cade47f8.jpg'
+      ></nut-tabbar-item>
+  <nut-tabbar-item tab-title="发现" 
+          img="http://img13.360buyimg.com/uba/jfs/t1/10361/35/4713/4643/5c0f3d62E437a3c94/273fd0fb90798f03.jpg"
+          activeImg='http://img14.360buyimg.com/uba/jfs/t1/26604/35/1073/7896/5c0f3d61Eb9f5f184/5f01c938abe4216d.jpg'
+      ></nut-tabbar-item>
+  <nut-tabbar-item tab-title="购物车" 
+         img="http://img11.360buyimg.com/uba/jfs/t1/14848/18/1066/3723/5c0f41bdE9f2a38fe/e6ed6768717297fb.jpg"
+         activeImg='http://img30.360buyimg.com/uba/jfs/t1/17538/16/1070/6214/5c0f41bdE4bc9a1db/74cf978e5015454b.jpg'
+      ></nut-tabbar-item>
+  <nut-tabbar-item tab-title="我的" 
+         img="http://img20.360buyimg.com/uba/jfs/t1/20004/20/1045/3620/5c0f3d61Eaaec1670/9e59db63983b7b9f.jpg"
+         activeImg='http://img14.360buyimg.com/uba/jfs/t1/23967/14/1072/6714/5c0f3d61E0ad8991e/8f741953f6e38f15.jpg'
+      ></nut-tabbar-item>
+</nut-tabbar>
+```
+
 ### 自定义选中
 
 ``` html
@@ -119,6 +145,7 @@ setup() {
 |-----------------|--------------------|--------|---------|
 | v-model:visible | 选中标签的索引值   | number | 0       |
 | bottom          | 是否固定在页面底部 | Booble | false   |
+| size          | icon的尺寸/图片的宽高 | string | '20px'  |
 | unactive-color  | icon未激活的颜色   | string | #7d7e80 |
 | active-color    | icon激活的颜色     | string | #1989fa |
 
@@ -127,7 +154,9 @@ setup() {
 | 字段      | 说明                                      | 类型   | 默认值 |
 |-----------|-------------------------------------------|--------|--------|
 | tab-title | 标签页的标题                              | String | --     |
-| icon      | 标签页显示的[图标名称](#/icon) 或图片链接 | String | --     |
+| icon      | 标签页显示的[图标名称](#/icon)  | String | --     |
+| img      | 标签页显示图片链接 | String | --     |
+| activeImg      | 激活以后的标签页显示图片链接（同一个item中icon和img只能选择一个） | String | --     |
 | href      | 标签页的跳转链接                          | String | --     |
 | num       | 页签右上角的数字角标，超出99之后为99+     | Number | --     |
 

src/packages/__VUE/tabbaritem/index.taro.vue

@@ -29,10 +29,21 @@
           :class-prefix="classPrefix"
         ></nut-icon>
       </view>
+      <div
+        v-if="!icon && activeImg"
+        class="nut-tabbar-item_icon-box_icon"
+        :style="{
+          backgroundImage: `url(${
+            state.active == state.index ? activeImg : img
+          })`,
+          width: state.size,
+          height: state.size
+        }"
+      ></div>
       <view
         :class="[
           'nut-tabbar-item_icon-box_nav-word',
-          { 'nut-tabbar-item_icon-box_big-word': !icon }
+          { 'nut-tabbar-item_icon-box_big-word': !icon && !activeImg }
         ]"
         >{{ tabTitle }}</view
       >
@@ -72,6 +83,14 @@ export default create({
       type: String,
       default: ''
     },
+    activeImg: {
+      type: String,
+      default: ''
+    },
+    img: {
+      type: String,
+      default: ''
+    },
     classPrefix: {
       type: String,
       default: 'nut-icon'

src/packages/__VUE/tabbaritem/index.vue

@@ -29,10 +29,21 @@
           :class-prefix="classPrefix"
         ></nut-icon>
       </view>
+      <div
+        v-if="!icon && activeImg"
+        class="nut-tabbar-item_icon-box_icon"
+        :style="{
+          backgroundImage: `url(${
+            state.active == state.index ? activeImg : img
+          })`,
+          width: state.size,
+          height: state.size
+        }"
+      ></div>
       <view
         :class="[
           'nut-tabbar-item_icon-box_nav-word',
-          { 'nut-tabbar-item_icon-box_big-word': !icon }
+          { 'nut-tabbar-item_icon-box_big-word': !icon && !activeImg }
         ]"
         >{{ tabTitle }}</view
       >
@@ -72,6 +83,14 @@ export default create({
       type: String,
       default: ''
     },
+    activeImg: {
+      type: String,
+      default: ''
+    },
+    img: {
+      type: String,
+      default: ''
+    },
     classPrefix: {
       type: String,
       default: 'nut-icon'

src/sites/mobile-taro/vue/src/nav/pages/tabbar/index.vue

@@ -8,7 +8,34 @@
       <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
       <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
     </nut-tabbar>
-
+    <h2>自定义图片</h2>
+    <nut-tabbar @tab-switch="tabSwitch">
+      <nut-tabbar-item
+        tab-title="首页"
+        img="http://img13.360buyimg.com/uba/jfs/t1/29316/38/1115/3203/5c0f3d61E35d0c7da/9e557f2cb5c9dab6.jpg"
+        activeImg="http://img20.360buyimg.com/uba/jfs/t1/9996/36/8646/4833/5c0f3d61E7c1b7e0f/c98ad61124172e93.jpg"
+      ></nut-tabbar-item>
+      <nut-tabbar-item
+        tab-title="分类"
+        img="http://img12.360buyimg.com/uba/jfs/t1/25443/23/1062/4600/5c0f3d61E2e9f1360/c9b3421fe18614e2.jpg"
+        activeImg="http://img20.360buyimg.com/uba/jfs/t1/19241/12/1048/8309/5c0f3d61E17ed5a56/c3af0964cade47f8.jpg"
+      ></nut-tabbar-item>
+      <nut-tabbar-item
+        tab-title="发现"
+        img="http://img13.360buyimg.com/uba/jfs/t1/10361/35/4713/4643/5c0f3d62E437a3c94/273fd0fb90798f03.jpg"
+        activeImg="http://img14.360buyimg.com/uba/jfs/t1/26604/35/1073/7896/5c0f3d61Eb9f5f184/5f01c938abe4216d.jpg"
+      ></nut-tabbar-item>
+      <nut-tabbar-item
+        tab-title="购物车"
+        img="http://img11.360buyimg.com/uba/jfs/t1/14848/18/1066/3723/5c0f41bdE9f2a38fe/e6ed6768717297fb.jpg"
+        activeImg="http://img30.360buyimg.com/uba/jfs/t1/17538/16/1070/6214/5c0f41bdE4bc9a1db/74cf978e5015454b.jpg"
+      ></nut-tabbar-item>
+      <nut-tabbar-item
+        tab-title="我的"
+        img="http://img20.360buyimg.com/uba/jfs/t1/20004/20/1045/3620/5c0f3d61Eaaec1670/9e59db63983b7b9f.jpg"
+        activeImg="http://img14.360buyimg.com/uba/jfs/t1/23967/14/1072/6714/5c0f3d61E0ad8991e/8f741953f6e38f15.jpg"
+      ></nut-tabbar-item>
+    </nut-tabbar>
     <h2>自定义选中</h2>
     <nut-tabbar v-model:visible="active">
       <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>