fix(tabbar): add dot props (#1147)

src/packages/__VUE/tabbar/demo.vue

@@ -51,7 +51,7 @@
     <h2>徽标提示</h2>
     <nut-tabbar>
       <nut-tabbar-item tab-title="首页" icon="home" num="11"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="分类" icon="category" :dot="true"></nut-tabbar-item>
       <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
       <nut-tabbar-item tab-title="购物车" icon="cart" num="110"></nut-tabbar-item>
       <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>

src/packages/__VUE/tabbar/doc.md

@@ -198,6 +198,7 @@ app.use(TabbarItem);
 | href      | 标签页的跳转链接                          | string | --     |
 | to  `小程序不支持`      | 	标签页的路由对象，等于 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | string｜object | --     |
 | num       | 页签右上角的数字角标，超出99之后为99+     | number | --     |
+| dot       | 是否显示图标右上角小红点   | boolean | false    |
 
 
 ### Event

src/packages/__VUE/tabbaritem/index.scss

@@ -32,6 +32,21 @@
       color: $white;
       z-index: 1;
     }
+    &_dot {
+      position: absolute;
+      width: 7px;
+      height: 7px;
+      border-radius: 7px;
+      padding: 0px;
+      background: $tabbar-active-color;
+      text-align: center;
+      font-size: 12px;
+      font-weight: normal;
+      color: #fff;
+      top: 0;
+      right: 0;
+      transform: translate(50%, -50%);
+    }
 
     &_num {
       line-height: 1;

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

@@ -8,12 +8,17 @@
     @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">
-        {{ num }}
-      </view>
-      <view class="nut-tabbar-item_icon-box_tips nut-tabbar-item_icon-box_nums" v-else-if="num && num > 100">{{
-        '99+'
-      }}</view>
+      <template v-if="!dot">
+        <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>
+      </template>
+      <template v-if="dot">
+        <div class="nut-tabbar-item_icon-box_dot"></div>
+      </template>
       <view v-if="icon">
         <nut-icon
           class="nut-tabbar-item_icon-box_icon"
@@ -73,6 +78,10 @@ export default create({
       type: String,
       default: ''
     },
+    dot: {
+      type: Boolean,
+      default: false
+    },
     classPrefix: {
       type: String,
       default: 'nut-icon'

src/packages/__VUE/tabbaritem/index.vue

@@ -8,12 +8,18 @@
     @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">
-        {{ num }}
-      </view>
-      <view class="nut-tabbar-item_icon-box_tips nut-tabbar-item_icon-box_nums" v-else-if="num && num > 100">{{
-        '99+'
-      }}</view>
+      <template v-if="!dot">
+        <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>
+      </template>
+      <template v-if="dot">
+        <div class="nut-tabbar-item_icon-box_dot"></div>
+      </template>
+
       <view v-if="icon">
         <nut-icon
           class="nut-tabbar-item_icon-box_icon"
@@ -78,6 +84,10 @@ export default create({
       type: String,
       default: 'nut-icon'
     },
+    dot: {
+      type: Boolean,
+      default: false
+    },
     fontClassName: {
       type: String,
       default: 'nutui-iconfont'

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

@@ -48,7 +48,7 @@
     <h2>徽标提示</h2>
     <nut-tabbar>
       <nut-tabbar-item tab-title="首页" icon="home" num="11"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="分类" icon="category" :dot="true"></nut-tabbar-item>
       <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
       <nut-tabbar-item tab-title="购物车" icon="cart" num="110"></nut-tabbar-item>
       <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>