代码演示
如何引入
jsx
import { Badge } from '@kousum/semi-ui-vue';基本用法
Badge 的基本类型为 count。如果传入 dot 则显示为小圆点，两者互斥，优先渲染小圆点。当传入是节点类型时，将直接渲染该节点。
设置显示数字最大值
可以通过设置 overflowCount 值设置显示数字的最大值，当实际数值超过该值时将以 ${overflowCount}+ 的格式显示。
设置徽标位置
可以通过设置 position 设置位置，支持：leftTop， leftBottom， rightTop（默认）， rightBottom。
设置徽标样式
可以通过设置 theme 和 type 设置徽标的样式。其中 theme 支持三种形式：solid, light, inverted。默认形式为 solid。
type 支持如下类型：primary，secondary，tertiary，warning 和 danger。默认类型为 primary。
独立使用
当 Badge 作为独立元素时可以单独使用。
API参考
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| children | 徽章的 base | ReactNode | 无 |
| className | 外侧 className | string | - |
| count | 展示的内容 | ReactNode | 无 |
| countClassName | 内容区域 className | string | 无 |
| dot | 不展示数字，显示小圆点 | boolean | false |
| overflowCount | 最大的展示数字值 | number | 无 |
| position | 徽章位置，可选 leftTop、 leftBottom、 rightTop、 rightBottom | string | rightTop |
| countStyle | 徽章内容的样式, v2.59.1后生效 | CSSProperties | 无 |
| theme | 徽章主题，可选 solid、 light、 inverted | string | solid |
| type | 徽章类型，可选 primary、 secondary、 tertiary、 danger、 warning、 success | string | primary |
文案规范
- Badge内容若为英文时，首字母应大写