feat(badge): add badge-class close #50 (#51)

example/src/demo/pc/badge/badge-class.vue

@@ -0,0 +1,21 @@
+<template>
+  <tiny-badge :value="2" badge-class="custom-badge-class">我的待办</tiny-badge>
+</template>
+
+<script>
+import { Badge } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBadge: Badge
+  }
+}
+</script>
+
+<style>
+.custom-badge-class {
+  background-color: #f2f2f3;
+  color: #7a7e87;
+  font-weight: normal;
+}
+</style>

example/src/docs/zh-CN/badge/badge-class.md

@@ -0,0 +1,20 @@
+<div class="demo-header">
+<p class="overviewicon">
+  <span class="wapi-form-badge"/>
+</p>
+
+## Badge 标记
+
+<nova-uxlink widget-name="Badge"></nova-uxlink>
+
+Badge 展示指定数据信息，如：我的待办数、新任务数等。
+</div>
+
+### 自定义标记class
+
+<p>你可以使用 badge-class 属性自定义标记的 class</p>
+<nova-demo-view link="badge/badge-class.vue"></nova-demo-view>
+
+<br>
+
+<nova-attributes link="badge"></nova-attributes>

example/src/nav.config.comp.json

@@ -3172,6 +3172,10 @@
             {
               "path": "/badge/hidden-badge-while-read-message",
               "name": "消息已读动态隐藏标记"
+            },
+            {
+              "path": "/badge/badge-class",
+              "name": "自定义标记class"
             }
           ]
         },

example/src/route.config.comp1.js

@@ -830,6 +830,11 @@ export default [
     meta: { title: '提示组件-Badge 标记-消息已读动态隐藏标记', lang: 'zh-CN', sign: 'component' },
     component: () => import(/* webpackChunkName: 'v3-badge' */ './docs/zh-CN/badge/hidden-badge-while-read-message.md')
   },
+  {
+    path: 'badge/badge-class',
+    meta: { title: '提示组件-Badge 标记-自定义标记class', lang: 'zh-CN', sign: 'component' },
+    component: () => import(/* webpackChunkName: 'v3-badge' */ './docs/zh-CN/badge/badge-class.md')
+  },
   {
     path: 'loading',
     meta: { title: '提示组件-Loading 加载', lang: 'zh-CN', sign: 'component' },

packages/badge/src/index.js

@@ -51,7 +51,8 @@ export default {
     type: {
       type: String,
       validator: (value) => ~['primary', 'success', 'warning', 'info', 'danger'].indexOf(value)
-    }
+    },
+    badgeClass: String
   },
   setup(props, context) {
     return $setup({ props, context, template })

packages/badge/src/pc.vue

@@ -15,7 +15,7 @@
     <div
       v-if="!hidden && (state.content || state.content === 0 || isDot)"
       class="tiny-badge"
-      :class="[isDot ? 'tiny-badge--default' : '', state.isOverstep ? 'tiny-badge--max' : '', type ? 'tiny-badge--' + type : '']"
+      :class="[isDot ? 'tiny-badge--default' : '', state.isOverstep ? 'tiny-badge--max' : '', type ? 'tiny-badge--' + type : '', badgeClass || '']"
     >
       <slot name="content">
         <a v-if="state.href" :href="state.href" :target="target" rel="noopener noreferrer">{{ state.content }}</a>
@@ -31,7 +31,7 @@ import { props, setup } from '@opentiny/vue-common'
 import '@opentiny/vue-theme/badge/index.css'
 
 export default {
-  props: [...props, 'isDot', 'hidden', 'type', 'max', 'value', 'modelValue', 'href', 'target'],
+  props: [...props, 'isDot', 'hidden', 'type', 'max', 'value', 'modelValue', 'href', 'target', 'badgeClass'],
   setup(props, context) {
     return setup({ props, context, renderless, api })
   }