Badge 徽章

按钮和图标上的数字或状态标记。

基础用法

基础用法

0

0

0

0

0

<template>
	<LiRow>
		<LiCol :span="4">
			<LiBadge :value="val">
				<LiButton>测试</LiButton>
			</LiBadge>
		</LiCol>
		<LiCol :span="4">
			<LiBadge :value="val" type="primary">
				<LiButton>测试</LiButton>
			</LiBadge>
		</LiCol>
		<LiCol :span="4">
			<LiBadge :value="val" type="success">
				<LiButton>测试</LiButton>
			</LiBadge>
		</LiCol>
		<LiCol :span="4">
			<LiBadge :value="val" type="info">
				<LiButton>测试</LiButton>
			</LiBadge>
		</LiCol>
		<LiCol :span="4">
			<LiBadge :value="val" type="warning">
				<LiButton>测试</LiButton>
			</LiBadge>
		</LiCol>
	</LiRow>
</template>
<script setup lang="ts">
	import { ref } from "vue";

	const val = ref(0);
</script>
<style scope lang="scss"></style>

限制

使用min、max属性

999

<template>
	<LiBadge :value="val" :min="0" :max="99">
		<LiButton>测试{{ val }}</LiButton>
	</LiBadge>
</template>
<script setup lang="ts">
	import { ref } from "vue";

	const val = ref(999);
</script>
<style scope lang="scss"></style>

小点

使用is-dot属性

<template>
	<LiBadge is-dot>
		<LiButton>测试</LiButton>
	</LiBadge>
</template>
<script setup lang="ts"></script>
<style scope lang="scss"></style>

插槽

徐然最帅

<template>
	<LiBadge>
		<template #value>
			徐然最帅
		</template>
		<LiButton>测试</LiButton>
	</LiBadge>
</template>
<script setup lang="ts"></script>
<style scope lang="scss"></style>

Badge Attributes

参数	说明	类型	可选值	默认值
type	类型	string	default / primary / success / warning / info / danger	default
is-dot	小点状态	boolean		false
min	最小值	number		0
max	最大值	number		99

Badge Slots

插槽名	说明
-	内容
value	徽章内容