feat(badge): 新增bubble样式 (#2091)

src/packages/__VUE/badge/demo.vue

@@ -11,6 +11,9 @@
       <nut-badge value="NEW">
         <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
+      <nut-badge value="NEW" bubble>
+        <nut-avatar shape="square"></nut-avatar>
+      </nut-badge>
       <nut-badge dot>
         <nut-avatar shape="square"></nut-avatar>
       </nut-badge>

src/packages/__VUE/badge/doc.en-US.md

@@ -218,6 +218,7 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 | max     | When value is a numeric value, the maximum value                     | number  | `10000`   |
 | z-index | badge z-index                          | number  | `10`      |
 | dot     | whether to dot                                 | boolean | `false`   |
+| bubble(`>v4.0.0`)  | whether to bubble                               | Boolean | `false`   |
 | hidden  | whether to hide                                   | boolean | `false`   |
 | top     | Up and down offset, support unit setting, for example: 5px | number  | `0`       |
 | right   | Left and right offset, support unit setting, for example: 5px | number  | `0`       |

src/packages/__VUE/badge/doc.md

@@ -218,6 +218,7 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 | max     | `value` 为数值时，最大值                     | number  | `10000`   |
 | z-index | 徽标的 `z-index` 值                          | number  | `10`      |
 | dot     | 是否为小点                                 | boolean | `false`   |
+| bubble(`>v4.0.0`)  | 是否为气泡形状                                 | Boolean | `false`   |
 | hidden  | 是否隐藏                                   | boolean | `false`   |
 | top     | 上下偏移量，支持单位设置，可设置为：`5px` 等 | number  | `0`       |
 | right   | 左右偏移量，支持单位设置，可设置为：`5px` 等 | number  | `0`       |

src/packages/__VUE/badge/doc.taro.md

@@ -218,6 +218,7 @@ import { Check, Link, Download } from '@nutui/icons-vue-taro';
 | max     | `value` 为数值时，最大值                     | number  | `10000`   |
 | z-index | 徽标的 `z-index` 值                          | number  | `10`      |
 | dot     | 是否为小点                                 | boolean | `false`   |
+| bubble(`>v4.0.0`)  | 是否为气泡形状                                 | Boolean | `false`   |
 | hidden  | 是否隐藏                                   | boolean | `false`   |
 | top     | 上下偏移量，支持单位设置，可设置为：`5px` 等 | number  | `0`       |
 | right   | 左右偏移量，支持单位设置，可设置为：`5px` 等 | number  | `0`       |

src/packages/__VUE/badge/index.scss

@@ -41,5 +41,8 @@
       border-radius: $badge-dot-border-radius;
       padding: $badge-dot-padding;
     }
+    &--bubble {
+      border-bottom-left-radius: 0;
+    }
   }
 }

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

@@ -8,7 +8,7 @@
       v-show="!hidden && (content || dot)"
       v-text="content"
       class="nut-badge__content nut-badge__content--sup"
-      :class="{ 'nut-badge__content--dot': dot }"
+      :class="{ 'nut-badge__content--dot': dot, 'nut-badge__content--bubble': !dot && bubble }"
       :style="stl"
     >
     </view>
@@ -32,6 +32,10 @@ export default create({
       type: Boolean,
       default: false
     },
+    bubble: {
+      type: Boolean,
+      default: false
+    },
     hidden: {
       type: Boolean,
       default: false

src/packages/__VUE/badge/index.vue

@@ -8,7 +8,7 @@
       v-show="!hidden && (content || dot)"
       v-text="content"
       class="nut-badge__content nut-badge__content--sup"
-      :class="{ 'nut-badge__content--dot': dot }"
+      :class="{ 'nut-badge__content--dot': dot, 'nut-badge__content--bubble': !dot && bubble }"
       :style="stl"
     >
     </view>
@@ -32,6 +32,10 @@ export default create({
       type: Boolean,
       default: false
     },
+    bubble: {
+      type: Boolean,
+      default: false
+    },
     hidden: {
       type: Boolean,
       default: false

src/sites/mobile-taro/vue/src/exhibition/pages/badge/index.vue

@@ -12,6 +12,9 @@
       <nut-badge value="NEW">
         <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
+      <nut-badge value="NEW" bubble>
+        <nut-avatar shape="square"></nut-avatar>
+      </nut-badge>
       <nut-badge dot>
         <nut-avatar shape="square"></nut-avatar>
       </nut-badge>