徽标

支持丰富配置的徽标组件。

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	指定按下去的样式类
value	String	-	值或显示的文本
theme	String	-	[详情] 徽标主题
ghost	Boolean	false	是否是幽灵徽标
plain	Boolean	false	是否是镂空徽标
mode	String	-	[详情] 模式
max	Number	-	[详情] 最大值
suffix	String	-	[详情] 后缀
decimal	Number	2	[详情] limit 模式时小数位的位数
absolute	Boolean	false	是否使用 absolute 绝对定位
dotSize	String	-	徽标圆点大小
fontSize	String	-	徽标字体大小
color	String	-	徽标字体颜色
margin	String	-	徽标外边距
padding	String	-	徽标内边距
width	String	-	徽标宽度
height	String	-	徽标高度
radius	String	-	徽标圆角大小
borderRadius	String	-	徽标圆角大小
border	String	-	徽标边框样式，对应 css 的 border 属性
borderWidth	String	-	徽标边框宽度
borderStyle	String	-	徽标边框样式
borderColor	String	-	徽标边框颜色
background	String	-	徽标背景
bgOpacity	String	-	徽标背景透明度

主题

通过 theme 属性来设置徽标主题，主题分为内置主题和自定义扩展主题。

内置主题

直接将 theme 属性设置为内置主题名称即可使用，如 theme="primary"。

主题名称	说明
primary	主要徽标。
success	成功徽标。
warning	警告徽标。
danger	危险徽标。
info	信息徽标。

扩展主题

1. 首先在 css 中定义好主题变量名。
2. 直接将变量名赋值给 theme 属性即可使用，如 theme="--my-custom-badge-theme-1"。

vue

<!-- 扩展主题 -->
<pure-badge value="扩展主题" theme="--my-custom-badge-theme-1" />

css

/* 定义扩展主题变量 */
page {
	--my-custom-badge-theme-1: #ff9900;
}

模式

默认情况下，传入的 value 会原样展示，为了方便使用，徽标还支持以下几种模式，通过 mode 属性来设置。

模式	说明
dot	徽标显示成一个圆点
overflow	徽标内容超出最大值部分显示省略号或自定义的后缀
limit	徽标内容超出最大值部分显示默认的后缀单位 k 或自定义的后缀

dot

可以通过 dotSize 设置圆点的大小。

overflow

• max 默认为 99。
• suffix 默认为 ...。

当 value 超出 max 时，会显示 max + suffix，比如 99...。

limit

• max 默认为 999。
• suffix 默认为 k。

当 value 超出 max 时，会显示 max + suffix，比如 1.60k。

事件

名称	参数	说明
@onClick	-	点击时触发

插槽

名称	参数	说明
#default	-	默认，通过插槽设置的内容。注意：内容会原样显示， mode、max、suffix、decimal 属性会失效