徽标 Badge
对应 Arco Badge:value 对应 count,is-dot 对应 dot。 属性用法见 Element Plus 文档。
数字与封顶
max 限制显示的最大数字,value 也支持英文文字。
12
99+
new
圆点与状态色
is-dot 搭配 type 展示不同状态的圆点。
A
B
C
与 Arco 的差异
无明显差异。
对应 Arco Badge:value 对应 count,is-dot 对应 dot。 属性用法见 Element Plus 文档。
max 限制显示的最大数字,value 也支持英文文字。
<template>
<el-badge :value="12"><el-button>Messages</el-button></el-badge>
<el-badge :value="120" :max="99"><el-button>Inbox</el-button></el-badge>
<el-badge value="new"><el-button>Updates</el-button></el-badge>
</template>is-dot 搭配 type 展示不同状态的圆点。
<template>
<el-badge is-dot><el-avatar>A</el-avatar></el-badge>
<el-badge is-dot type="success"><el-avatar>B</el-avatar></el-badge>
<el-badge is-dot type="primary"><el-avatar>C</el-avatar></el-badge>
</template>无明显差异。