Badge 徽标

此组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

• 通过 value 属性定义徽标的内容
• 通过 type 属性设置主题，可选值为 primary、success、warning、error、info

注意

此组件内部为 absolute 属性为 true 绝对定位，所以需要给 badge 父组件（元素）设置 position: relative 相对定位，再通过调整 offset 属性设置偏移值（数组，两个元素，第一个元素为x轴偏移，第二个元素为y轴偏移），可为负值，如"[-10, -10]"设置到合适的位置即可，如果不需要组件内部的绝对定位，设置 absolute 属性为 false 即可。

<fu-badge :value="5" type="error"></fu-badge>

设置徽标的类型为一个圆点

• 通过 isDot 属性设置，此形式组件内容，只显示一个圆点

<fu-badge is-dot type="success"></fu-badge>

设置徽标的形状

通过 shape 属性设置徽标的形状，可选值：

• circle 四角均为圆角
• horn 左下角为直角

<fu-badge shape="horn" value="5" type="error"></fu-badge>

设置数字的显示方式

通过 numberType 属性设置数字的显示方式，可选值：

• overflow 会根据max属性判断，超出显示 ${max}+
• ellipsis 会根据max属性判断，超出显示 ${max}...
• limit 会依据1000作为判断条件，超出1000，显示 ${value/1000}k, 例如：2.5k、2.50w，最多保留2位小数

<!-- ${max}+ -->
<fu-badge :value="1000" :max="999" numberType="overflow" type="success"></fu-badge>

<!-- ${max}... -->
<fu-badge :value="1000" :max="999" numberType="ellipsis" type="success"></fu-badge>

<!-- ${value/1000}k -->
<fu-badge :value="1000" :max="999" numberType="limit" type="success"></fu-badge>

API

Badge Props

属性名	说明	类型	默认值	可选值
value	显示的数字，大于 max 时显示为 ${max}+，为 0 且 showZero 为 false 时隐藏	String｜Number	-	-
show	是否显示徽标	Boolean	true	false
isDot	不显示数字，显示为一个圆点	Boolean	false	true
max	最大显示值，超过此值显示 ${max}+	String｜Number	99	-
type	徽标的主题，详见上方基础用法	String	primary	success/warning/error/info
showZero	当数值为 0 时是否显示徽标	Boolean	false	true
bgColor	徽标背景色，优先级比 type 高，如设置，type 参数会失效	String	-	-
color	徽标字体颜色	String	#ffffff	-
shape	徽标形状，详见上方设置徽标的形状	String	circle	circle/horn
numberType	数字的显示方式，详见上方设置数字的显示方式	String	overflow	ellipsis/limit
offset	徽标位置偏移，数组，第一个元素为x轴偏移，第二个元素为y轴偏移，如"[-10, -10]"设置到合适的位置即可	Array	[]	-
inverted	是否反转背景色和字体颜色	Boolean	false	true
absolute	是否使用绝对定位	Boolean	false	true
customStyle	定义需要用到的外部样式	String｜Object	-	-