徽标 Badge

徽标组件。

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

基础使用

• 通过 value 属性设置显示内容。

<template>
    <pure-badge value="徽标"></pure-badge>
</template>

圆点模式

• 通过将属性 mode 设置为 dot 开启圆点模式。

<template>
    <pure-badge mode="dot"></pure-badge>
</template>

主题

• 通过添加辅助类实现。

提示

辅助类使用规则

<template>
    <pure-badge class="pure-badge-primary" value="168"></pure-badge>
    <pure-badge class="pure-badge-success" value="哈哈"></pure-badge>
    <pure-badge class="pure-badge-danger" value="178"></pure-badge>
    <pure-badge class="pure-badge-warning" value="嘿嘿"></pure-badge>
    <pure-badge class="pure-badge-info" value="98"></pure-badge>
    <pure-badge class="pure-badge-primary" mode="dot"></pure-badge>
    <pure-badge class="pure-badge-success" mode="dot"></pure-badge>
    <pure-badge class="pure-badge-danger" mode="dot"></pure-badge>
    <pure-badge class="pure-badge-warning" mode="dot"></pure-badge>
    <pure-badge class="pure-badge-info" mode="dot"></pure-badge>
</template>

溢出模式

• 通过将属性 mode 设置为 overflow 开启溢出模式。
• 通过 max 属性设置最大值。
• 通过 suffix 属性设置后缀。
• 值超出后：显示 max + suffix，值为超出：显示原值。

<template>
    <pure-badge class="pure-badge-primary" value="1000" mode="overflow" suffix="+"></pure-badge>
	<pure-badge class="pure-badge-success" value="1000" mode="overflow" suffix="..."></pure-badge>
</template>

切割模式

• 通过将属性 mode 设置为 limit 开启切割模式。
• 通过 max 属性设置用于切割的阈值。
• 通过 suffix 属性设置后缀。
• 通过 decimal 属性设置要保留的小数点位数。
• 值超出后：显示 (value / max).toFixed(decimal)，值为超出：显示原值。

<template>
    <pure-badge class="pure-badge-primary" value="1688" mode="limit" max="1000" suffix="k"></pure-badge>
    <pure-badge class="pure-badge-primary" value="1688" mode="limit" max="1000" suffix="k" decimal="3"></pure-badge>
    <pure-badge class="pure-badge-success" value="15688" mode="limit" max="10000" suffix="w"></pure-badge>
    <pure-badge class="pure-badge-success" value="15688" mode="limit" max="10000" suffix="w" decimal="3"></pure-badge>
</template>

浅化背景

• 通过添加辅助类实现。

提示

辅助类使用规则

<template>
    <pure-badge class="pure-badge-primary pure-badge-light" value="168"></pure-badge>
    <pure-badge class="pure-badge-success pure-badge-light" value="哈哈"></pure-badge>
    <pure-badge class="pure-badge-danger pure-badge-light" value="178"></pure-badge>
    <pure-badge class="pure-badge-warning pure-badge-light" value="嘿嘿"></pure-badge>
    <pure-badge class="pure-badge-info pure-badge-light" value="98"></pure-badge>
</template>

边框

• 通过添加辅助类实现。

提示

辅助类使用规则

<template>
    <pure-badge class="pure-badge-primary pure-badge-light pure-badge-border" value="168"></pure-badge>
    <pure-badge class="pure-badge-success pure-badge-light pure-badge-border" value="哈哈"></pure-badge>
    <pure-badge class="pure-badge-danger pure-badge-light pure-badge-border" value="178"></pure-badge>
    <pure-badge class="pure-badge-warning pure-badge-light pure-badge-border" value="嘿嘿"></pure-badge>
    <pure-badge class="pure-badge-info pure-badge-light pure-badge-border" value="98"></pure-badge>
</template>

Props

属性名	说明	类型	默认值	可选值	版本
value	值	[String, Number]	""	-	+1.0.0
mode	显示模式，参考上方说明	String	-	dot、overflow、limit	+1.0.0
max	最大值或切割值	[String, Number]	99	-	+1.0.0
suffix	模式后缀	String	...	-	+1.0.0
decimal	切割模式下保留的小数位数	[String, Number]	2	-	+1.0.0
absolute	是否开启 absolute 定位	Boolean	true	false	+1.0.0