徽标

徽标组件。

基础使用

通过 value 属性设置徽标值。

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

圆点模式

将 mode 属性设置为 dot 即可开启圆点模式。
圆点模式时表现为一个小圆点，不显示 value 属性的值。

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

溢出模式

• 将 mode 属性设置为 overflow 开启溢出模式。
• 通过 max 属性设置最大值, 默认为 99。
• 通过 suffix 属性设置溢出后缀， 默认为 +。
• 当 value 属性的值超出 max 属性的值时，显示格式为 max + suffix。

<template>
	<!-- 最终显示为： "99+" -->
	<pure-badge value="200" mode="overflow" max="99" suffix="+"></pure-badge>
</template>

切割模式

• 将 mode 属性设置为 limit 开启切割模式。
• 通过 max 属性设置最大值, 默认为 999。
• 通过 suffix 属性设置溢出后缀， 默认为 k。
• 当 value 属性的值超出 max 属性的值时，显示格式为 (value / max) + suffix。

<template>
	<!-- 最终显示为： "2.56k" -->
	<pure-badge value="2560" mode="limit" max="999" suffix="k"></pure-badge>
</template>

主题

通过 theme 属性设置徽标主题。

<template>
	<pure-badge value="主要" theme="primary"></pure-badge>
	<pure-badge value="成功" theme="success"></pure-badge>
	<pure-badge value="警告" theme="warning"></pure-badge>
	<pure-badge value="错误" theme="error"></pure-badge>
	<pure-badge value="信息" theme="info"></pure-badge>
</template>

幽灵样式

通过 ghost 属性设置徽标幽灵样式。

<template>
	<pure-badge value="主要" ghost theme="primary"></pure-badge>
	<pure-badge value="成功" ghost theme="success"></pure-badge>
	<pure-badge value="警告" ghost theme="warning"></pure-badge>
	<pure-badge value="错误" ghost theme="error"></pure-badge>
	<pure-badge value="信息" ghost theme="info"></pure-badge>
</template>

镂空样式

通过 plain 属性设置徽标镂空样式。

<template>
	<pure-badge value="主要" plain theme="primary"></pure-badge>
	<pure-badge value="成功" plain theme="success"></pure-badge>
	<pure-badge value="警告" plain theme="warning"></pure-badge>
	<pure-badge value="错误" plain theme="error"></pure-badge>
	<pure-badge value="信息" plain theme="info"></pure-badge>
</template>

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	按下去的样式类
value	[String, Number]		值
theme	String		主题
ghost	Boolean	false	幽灵样式
plain	Boolean	false	镂空样式
mode	String		模式，可选值为 dot、overflow、limit
max	Number	99\999	overflow、limit 模式时值的最大值
suffix	String	+\k	overflow、limit 模式时的后缀
decimal	Number	2	limit 模式时保留的小数位数
size	String	8px	dot 模式时的圆点大小
radius	String	1000px	圆角大小

事件

名称	参数	说明
onClick		点击事件

插槽

名称	参数	说明
#default		默认，徽标内容

样式变量

名称	说明
--pure-badge-padding	内边距
--pure-badge-border-radius	圆角大小
--pure-badge-border-width	边框宽度
--pure-badge-border-style	边框类型
--pure-badge-border-color	边框颜色
--pure-badge-background	背景
--pure-badge-background-opacity	背景透明度
--pure-badge-dot-size	圆点大小