Badge 徽标

在右上角展示徽标数字或小红点。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

设置 value 属性后，Badge 会在子元素的右上角显示对应的徽标。

<zq-badge :value="5">
  <zq-button type="primary" text="按钮" />
</zq-badge>

小红点

通过 dot 属性设置为小红点模式。

<zq-badge dot>
  <zq-button type="primary" text="按钮" />
</zq-badge>

最大值

通过 max 属性设置最大值，超过最大值时会显示 {max}+。

<zq-badge :value="120" :max="99">
  <zq-button type="primary" text="按钮" />
</zq-badge>
<!-- 显示为 99+ -->

显示零值

默认情况下，当 value 为 0 时不显示徽标。通过 show-zero 属性可以在值为 0 时也显示。

<zq-badge :value="0" show-zero>
  <zq-button type="primary" text="按钮" />
</zq-badge>

徽标类型

支持 primary、success、warning、danger、info 五种类型，默认为 danger。

<zq-badge :value="5" type="primary">
  <zq-button text="主要" />
</zq-badge>
<zq-badge :value="5" type="success">
  <zq-button text="成功" />
</zq-badge>

自定义偏移

通过 offset 属性设置徽标的偏移量，格式为 [top, right]，单位为 rpx。

<zq-badge :value="5" :offset="[-10, -10]">
  <zq-button type="primary" text="按钮" />
</zq-badge>

独立使用

不包裹子元素时，Badge 作为独立元素使用。

<zq-badge :value="20" />
<zq-badge :value="200" :max="99" />

API

Props

参数	说明	类型	默认值
value	徽标内容	number | string	''
max	最大值，超过最大值会显示 {max}+，仅当 value 为数字时有效	number	99
dot	是否显示为小红点	boolean	false
show-zero	当 value 为 0 时是否显示	boolean	false
type	徽标类型	'primary' | 'success' | 'warning' | 'danger' | 'info'	'danger'
offset	徽标偏移量 [top, right]，单位 rpx	number[]	[]

Slots

名称	说明
default	徽标包裹的子元素

主题定制

变量名	说明
--color-error	danger 类型背景色
--color-primary	primary 类型背景色
--color-success	success 类型背景色
--color-warning	warning 类型背景色
--color-info	info 类型背景色