Badge 徽标

介绍

展示徽标数字或小红点。

基础用法

通过 color 属性来设置徽标颜色，通过 dot 属性来设置是否展示为小红点。

<!-- 文字展示 -->
<vd-badge :color="`#1989fa`" value="1" />
<!-- 展示为小红点-->
<vd-badge :color="`#1989fa`" :dot="true" />

设置最大值

通过 max 属性来设置最大值，超过最大值会显示 max+。

<vd-badge :color="`#1989fa`" value="999" :max="9" />

徽标位置

通过 position 属性来设置徽标位置，可选值为 static top-left top-right bottom-left bottom-right。

<!-- 上左 -->
<vd-badge :color="`#1989fa`" value="1" position="top-left" />
<!-- 上右 -->
<vd-badge :color="`#07c160`" value="2" position="top-right" />
<!-- 下左 -->
<vd-badge :color="`#ff976a`" value="3" position="bottom-left" />
<!-- 下右 -->
<vd-badge :color="`#ee0a24`" value="4" position="bottom-right" />

自定义徽章内容

通过插槽来自定义徽章内容。

<vd-badge :color="`#1989fa`" position="top-right">
  <vd-icon name="star" />
</vd-badge>

API

Props

参数	说明	类型	默认值
color	颜色	string	-
value	内容	string | number	-
dot	是否展示为小红点	boolean	false
max	最大值，超过最大值会显示 max+	string | number	-22
position	徽标位置	BadgePosition	'static'
show-zero	当 value 为 0 或 '0' 时，是否展示徽标	boolean	false

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent

Slots

名称	说明
default	自定义内容