Badge 标记

局部区域的小标记，例如消息提示，待办等。

基础使用

设置不同的 type 会出现不同的颜色背景。

控制台

value: 12

查看代码

<template>
	<demo-container class="gov-demo-badge">
		<gov-badge :value="value">
			<gov-button>标记</gov-button>
		</gov-badge>
		<gov-badge :value="value" type="primary">
			<gov-button>标记</gov-button>
		</gov-badge>
		<gov-badge :value="value" type="success">
			<gov-button>标记</gov-button>
		</gov-badge>
		<gov-badge :value="value" type="info">
			<gov-button>标记</gov-button>
		</gov-badge>
		<gov-badge :value="value" type="warning">
			<gov-button>标记</gov-button>
		</gov-badge>
		<gov-badge :value="value" type="danger">
			<gov-button>标记</gov-button>
		</gov-badge>
		<template #console>value: {{ value }}</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref(12);
</script>

<style lang="scss">
.gov-demo-badge {
	.gov-badge + .gov-badge {
		margin-left: 20px;
	}
}
</style>

超出最大值

当 value 绑定数值，且设置了 max ，超出最大值会显示 + 号。

查看代码

<template>
	<demo-container class="gov-demo-badge">
		<gov-badge :value="1000" :max="99">
			<gov-button>标记</gov-button>
		</gov-badge>
	</demo-container>
</template>

显示文本

value 可传入自定义文本、emoji内容。也可以已设置 transparent 来设置是否需要背景。

查看代码

<template>
	<demo-container class="gov-demo-badge">
		<gov-badge value="hot">
			<gov-button>火热</gov-button>
		</gov-badge>
		<gov-badge value="🔥" transparent>
			<gov-button>热度</gov-button>
		</gov-badge>
		<gov-badge value="🌧" transparent>
			<gov-button>雨天</gov-button>
		</gov-badge>
		<gov-badge value="☀️" transparent>
			<gov-button>太阳</gov-button>
		</gov-badge>
		<gov-badge value="🎧" transparent>
			<gov-button>音乐</gov-button>
		</gov-badge>
		<gov-badge value="😋" transparent>
			<gov-button>笑脸</gov-button>
		</gov-badge>
	</demo-container>
</template>

<style lang="scss">
.gov-demo-badge {
	.gov-badge + .gov-badge {
		margin-left: 20px;
	}
}
</style>

显示未小圆点

以原点的形式标记需要关注的内容。

查看代码

<template>
	<demo-container class="gov-demo-badge">
		<gov-badge value="12" isDot>
			<gov-button>标记</gov-button>
		</gov-badge>
		<gov-badge value="12" isDot type="primary">
			<gov-button>标记</gov-button>
		</gov-badge>
		<gov-badge value="12" isDot type="success">
			<gov-button>标记</gov-button>
		</gov-badge>
		<gov-badge value="12" isDot type="info">
			<gov-button>标记</gov-button>
		</gov-badge>
		<gov-badge value="12" isDot type="warning">
			<gov-button>标记</gov-button>
		</gov-badge>
		<gov-badge value="12" isDot type="danger">
			<gov-button>标记</gov-button>
		</gov-badge>
	</demo-container>
</template>

<style lang="scss">
.gov-demo-badge {
	.gov-badge + .gov-badge {
		margin-left: 20px;
	}
}
</style>

Attributes

参数	类型	默认值	描述
value	String | Number	-	Badge显示的值。
max	Number	-	值的最大显示限制，超过这个值会显示为'max+'。
isDot	Boolean	false	是否显示为小圆点。
hidden	Boolean	false	是否隐藏Badge。
transparent	Boolean	false	Badge是否透明，不适用于开启小圆点时。
type	String	"primary"	Badge的类型，可选值有'default', 'primary', 'success', 'info', 'warning', 'danger'。

Slots

插槽名	说明
default	默认插槽，被标记包裹的结构。