feat: badge，更新文档

src/packages/badge/badge.scss

@@ -9,7 +9,7 @@
     padding: 1px 7px;
     background-color: $primary-color;
     text-align: center;
-    color: #FFFFFF;
+    color: $badge-font-color;
     font-size: $badge-font-size;
     border-radius: 9px 9px 9px 0px;
     z-index: $zindex-mask;

src/packages/badge/badge.vue

@@ -63,7 +63,7 @@ export default {
     },
     isSingleVal() {
       if (this.isDot) return false;
-      return this.value.toString().length === 1;
+      return this.value && this.value.toString().length === 1;
     },
     isMaxVal() {
       if (this.isDot) return false;

src/packages/badge/demo.vue

@@ -20,6 +20,11 @@
       <nut-badge :value="200" :max="99" class="item"><div class="demo-svg"></div></nut-badge>
     </div>
 
+    <h4>自定义位置</h4>
+    <div class="demo-w">
+      <nut-badge :value="9" top="0" right="10px" class="item"><div class="demo-svg"></div></nut-badge>
+    </div>
+
   </div>
 </template>
 

src/packages/badge/doc.md

@@ -5,114 +5,73 @@
 ## 基本用法
 
 ```html
-<nut-badge 
-    :value="9" 
+<nut-badge
+    :isDot="true"
     class="item"
 >
-    <div class="demo-svg"></div>
+    拜访提醒
 </nut-badge>
 
-<nut-badge 
-    :value="9" 
+<nut-badge
+    :isDot="true"
     class="item"
 >
-    购物车
+    <div class="demo-svg"></div>
 </nut-badge>
 
-<nut-badge 
-    :value="9" 
-    class="item"
->
-    <nut-button>
-        购物车
-    </nut-button>
-</nut-badge>
 ```
 
-## Max用法
+## 数字角标
 
 ```html
-<nut-badge 
-    :value="200" 
-    :max="99" 
+<nut-badge
+    :value="9"
+    :max="99"
     class="item"
 >
-    <div class="demo-svg"></div>
+    拜访提醒
 </nut-badge>
 
-<nut-badge 
-    :value="200" 
-    :max="99" 
+<nut-badge
+    :value="99"
+    :max="99"
     class="item"
 >
-    购物车
+    拜访提醒
 </nut-badge>
 
-<nut-badge 
-    :value="200" 
-    :max="99" 
+<nut-badge
+    :value="200"
+    :max="99"
     class="item"
 >
-    <nut-button>
-        购物车
-    </nut-button>
+    拜访提醒
 </nut-badge>
-```
-
-## 文字用法
 
-```html
-<nut-badge 
-    value="new" 
+<nut-badge
+    :value="9"
+    :max="99"
     class="item"
 >
     <div class="demo-svg"></div>
 </nut-badge>
 
-<nut-badge 
-    value="new" 
-    class="item"
->
-    购物车
-</nut-badge>
-
-<nut-badge 
-    value="new" 
-    :max="99" 
-    class="item"
->
-    <nut-button>
-        购物车
-    </nut-button>
-</nut-badge>
-```
-
-## 小圆点
-
-```html
-<nut-badge 
-    :isDot="true" 
+<nut-badge
+    :value="99"
+    :max="99"
     class="item"
 >
     <div class="demo-svg"></div>
 </nut-badge>
 
-<nut-badge 
-    :isDot="true" 
+<nut-badge
+    :value="200"
+    :max="99"
     class="item"
 >
-    文字内容
+    <div class="demo-svg"></div>
 </nut-badge>
 
-<nut-badge 
-    :isDot="true" 
-    :max="99" 
-    class="item"
->
-    <nut-button>
-        购物车
-    </nut-button>
-</nut-badge>
 ```
 
 ## 自定义位置
@@ -124,8 +83,7 @@
     right="10px" 
     class="item"
 >
-    <div class="demo-svg">
-    </div>
+    <div class="demo-svg"></div>
 </nut-badge>
 ```
 
@@ -140,4 +98,4 @@
 | isDot | 是否为小点 | Boolean | false
 | hidden | 是否隐藏 | Boolean | false
 | top   | 上下偏移量，支持单位设置，可设置为：5px、5rem等 | String | 0
-| left  | 左右偏移量，支持单位设置，可设置为：5px、5rem等 | String | 0
+| right  | 左右偏移量，支持单位设置，可设置为：5px、5rem等 | String | 0

src/styles/variable.scss

@@ -134,4 +134,5 @@ $tag-border-radius-circle: 10px !default;
 
 // ---- Badge ----
 $badge-font-size: 11px !default;
+$badge-font-color: #fff !default;