fix(tabbar): 文档优化，解决控制台warn #712

src/packages/__VUE/tabbar/doc.md

@@ -121,6 +121,18 @@ setup() {
   <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
 </nut-tabbar>
 ```
+
+### 自定义Icon
+如果需要在现有 Icon 的基础上使用更多图标，请参考icon组件自定义图标引入。
+``` html
+<nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
+  <nut-tabbar-item tab-title="首页" font-class-name="iconfont" class-prefix="icon" icon="home"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="分类" font-class-name="iconfont" class-prefix="icon"  icon="category"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="发现" font-class-name="iconfont" class-prefix="icon"  icon="find"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="购物车" font-class-name="iconfont" class-prefix="icon"  icon="cart"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="我的" font-class-name="iconfont" class-prefix="icon" icon="my"></nut-tabbar-item>
+</nut-tabbar>
+```
 ### 三个图标的标签栏
 
 ``` html
@@ -167,6 +179,8 @@ setup() {
 |-----------|-------------------------------------------|--------|--------|
 | tab-title | 标签页的标题                              | String | --     |
 | icon      | 标签页显示的[图标名称](#/icon)  | String | --     |
+| font-class-name | 自定义icon 字体基础类名     | String           | `nutui-iconfont` |
+| class-prefix | 自定义icon 类名前缀，用于使用自定义图标     | String           | `nut-icon` |
 | img      | 标签页显示图片链接 | String | --     |
 | activeImg      | 激活以后的标签页显示图片链接（同一个item中icon和img只能选择一个） | String | --     |
 | href      | 标签页的跳转链接                          | String | --     |

src/packages/__VUE/tabbaritem/index.vue

@@ -3,23 +3,17 @@
     class="nut-tabbar-item"
     :class="{ 'nut-tabbar-item__icon--unactive': state.active != state.index }"
     :style="{
-      color:
-        state.active == state.index ? state.activeColor : state.unactiveColor
+      color: state.active == state.index ? state.activeColor : state.unactiveColor
     }"
     @click="change(state.index)"
   >
     <view class="nut-tabbar-item_icon-box">
-      <view
-        class="nut-tabbar-item_icon-box_tips nut-tabbar-item_icon-box_num"
-        v-if="num && num <= 99"
-      >
+      <view class="nut-tabbar-item_icon-box_tips nut-tabbar-item_icon-box_num" v-if="num && num <= 99">
         {{ num }}
       </view>
-      <view
-        class="nut-tabbar-item_icon-box_tips nut-tabbar-item_icon-box_nums"
-        v-else-if="num && num > 100"
-        >{{ '99+' }}</view
-      >
+      <view class="nut-tabbar-item_icon-box_tips nut-tabbar-item_icon-box_nums" v-else-if="num && num > 100">{{
+        '99+'
+      }}</view>
       <view v-if="icon">
         <nut-icon
           class="nut-tabbar-item_icon-box_icon"
@@ -33,18 +27,13 @@
         v-if="!icon && activeImg"
         class="nut-tabbar-item_icon-box_icon"
         :style="{
-          backgroundImage: `url(${
-            state.active == state.index ? activeImg : img
-          })`,
+          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 && !activeImg }
-        ]"
+        :class="['nut-tabbar-item_icon-box_nav-word', { 'nut-tabbar-item_icon-box_big-word': !icon && !activeImg }]"
         >{{ tabTitle }}</view
       >
     </view>
@@ -53,14 +42,7 @@
 <script lang="ts">
 import { createComponent } from '../../utils/create';
 import { useRouter } from 'vue-router';
-import {
-  ComponentInternalInstance,
-  computed,
-  getCurrentInstance,
-  inject,
-  reactive,
-  watch
-} from 'vue';
+import { ComponentInternalInstance, computed, getCurrentInstance, inject, onMounted, reactive, watch } from 'vue';
 const { create } = createComponent('tabbar-item');
 export default create({
   props: {
@@ -116,8 +98,7 @@ export default create({
       if (child.proxy) {
         let index = parent.children.length;
         state.index = index;
-        let obj = Object.assign({}, child.proxy, { index });
-        parent.children.push(obj);
+        parent.children.push(child.proxy);
       }
     };
     relation(getCurrentInstance() as ComponentInternalInstance);