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

基本使用

通过shape参数设置徽标形状，circle为四角均为圆角（默认），horn为左下角为直角。

<un-badge value="12" shape="horn">
	<un-button text="按钮"></un-button>
</un-badge>
<un-badge value="3">
	<un-button text="按钮1"></un-button>
</un-badge>
<un-badge value="21">
	<un-button text="按钮1"></un-button>
</un-badge>
<un-badge value="100">
	<un-button text="按钮1"></un-button>
</un-badge>
<un-badge isDot>
	<un-button text="按钮1"></un-button>
</un-badge>

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

通过isDot参数设置，该形式组件没有内容，只显示一个圆点

<un-badge :isDot="true" type="success">
	<un-button text="按钮"></un-button>
</un-badge>

设置数字的显示方式 overflow|ellipsis|limit

• overflow会根据max字段判断，超出显示${max}+
• ellipsis会根据max判断，超出显示${max}...
• limit会依据1000作为判断条件，超出1000，显示${value/1000}K，比如2.2k、3.34w，最多保留2位小数

<un-badge :value="5132" numberType="ellipsis">
	<un-button text="按钮1"></un-button>
</un-badge>
<un-badge :value="110" max="99" numberType="overflow">
	<un-button text="按钮1"></un-button>
</un-badge>
<un-badge :value="1500" numberType="limit">
	<un-button text="按钮1"></un-button>
</un-badge>
<un-badge :value="45187" numberType="limit">
	<un-button text="按钮1"></un-button>
</un-badge>

自定义主题

通过type参数设置徽标主题，支持primary、warning、error、success、info五种主题。

<un-badge value="12" shape="horn" type="warning">
	<un-button text="按钮"></un-button>
</un-badge>
<un-badge :value="9" type="error">
	<un-button text="按钮1"></un-button>
</un-badge>
<un-badge :value="9" type="warning">
	<un-button text="按钮1"></un-button>
</un-badge>
<un-badge :value="9" type="success">
	<un-button text="按钮1"></un-button>
</un-badge>
<un-badge :value="9" type="primary">
	<un-button text="按钮1"></un-button>
</un-badge>
<un-badge :value="9" type="warning" isDot>
	<un-button text="按钮1"></un-button>
</un-badge>

徽标位置

通过position参数设置徽标位置，支持top-left、top-right（默认）、bottom-left、bottom-right四种位置。

<un-badge value="12" type="warning" position="top-left">
	<un-button text="按钮"></un-button>
</un-badge>
<un-badge :value="9" type="warning" position="bottom-left">
	<un-button text="按钮1"></un-button>
</un-badge>
<un-badge :value="9" type="success" position="bottom-right">
	<un-button text="按钮1"></un-button>
</un-badge>

自定义内容

通过插槽content可以自定义徽标内容，插槽会提供value参数，可以获取当前值。

<un-badge :value="5132" numberType="ellipsis">
	<un-button text="按钮1"></un-button>
	<template #content>
		<text style="font-size: 11px;color:#fff">new</text>
	</template>
</un-badge>
<un-badge :value="110" max="99" numberType="overflow">
	<un-button text="按钮1"></un-button>
	<template #content>
		<text style="font-size: 11px;color:#fff">hot</text>
	</template>
</un-badge>
<un-badge value="99" shape="horn">
	<un-button text="按钮1"></un-button>
	<template #content="{ value }">
		<un-icon name="chat" />
		<text style="font-size: 11px;color:#fff">{{ value }}</text>
	</template>
</un-badge>

反转色

通过inverted参数可以反转背景和字体颜色。

<un-badge :value="9" type="error" inverted>
	<un-button text="按钮1"></un-button>
</un-badge>
<un-badge :value="1532" inverted type="warning">
	<un-button text="按钮1"></un-button>
</un-badge>
<un-badge :value="12" inverted type="success">
	<un-button text="按钮1"></un-button>
</un-badge>
<un-badge :value="999" inverted type="primary">
	<un-button text="按钮1"></un-button>
</un-badge>

独立使用

徽标组件可以独立使用，不包裹在其他组件内部。

<un-badge value="12" shape="horn"></un-badge>
<un-badge value="3"></un-badge>
<un-badge value="21"></un-badge>
<un-badge value="100"></un-badge>
<un-badge isDot></un-badge>

API

Props

参数	说明	类型	默认值
isDot	不展示数字，只有一个小点	boolean	false
value	展示的数字，大于 max 时显示为 ${max}+，为0且showZero为false时隐藏	string | number	-
show	组件是否显示	boolean	true
max	最大值，超过最大值会显示 {max}+	string | number	99
type	主题类型	Enum	error
showZero	当数值为 0 时，是否展示 Badge	boolean	false
bgColor	背景颜色，优先级比type高，如设置，type参数会失效，支持使用主题色	string	-
color	字体颜色，支持使用主题色	string	#ffffff
shape	徽标形状，circle-四角均为圆角，horn-左下角为直角	Enum	circle
numberType	设置数字的显示方式，详细见上方文档	Enum	overflow
offset	设置badge的位置偏移，格式为 [x, y]	Array	-
inverted	是否反转背景和字体颜色	boolean	false
position	徽标位置	Enum	top-right
absolute	是否使用绝对定位	boolean	false
customStyle	自定义样式	object | string	''

Slots

插槽名	说明	参数
default	默认插槽，用于包裹需要显示徽标的元素	-
content	自定义徽标内容	value: 当前值