Skip to content

Badge 角标

参数

参数说明类型可选值默认值
model-value文本内容string
max最大值number
is-dot是否点状显示booleanfalse
hidden是否隐藏booleanfalse
type类型primary / success / error / warning

示例

基本用法

html
<cl-badge value="16">
	<cl-button>评论</cl-button>
</cl-badge>

自定义内容

html
<cl-badge value="NEW">
	<cl-button>自定义内容</cl-button>
</cl-badge>

最大值

html
<cl-badge :value="132" :max="99">
	<cl-button>最大</cl-button>
</cl-badge>

点形状

html
<cl-badge :value="132" is-dot>
	<cl-button>点形状</cl-button>
</cl-badge>

不同状态

html
<cl-badge type="primary" is-dot>
	<cl-button type="text" size="mini">主要</cl-button>
</cl-badge>