elementui徽章

ElementUI 徽章（Badge）使用指南

ElementUI 提供了 el-badge 组件用于显示数字、状态标记或小红点提示，适用于消息通知、未读状态等场景。

基础用法

通过 value 属性设置徽章内容，支持数字或字符串。未设置 value 时显示为小红点。

<el-badge :value="12">
  <el-button>评论</el-button>
</el-badge>

最大值设置

通过 max 属性限制显示的最大值。当 value 超过 max 时，会显示 {max}+。

<el-badge :value="200" :max="99">
  <el-button>消息</el-button>
</el-badge>

自定义内容

value 支持字符串或模板插槽，可通过 slot 自定义显示内容。

<el-badge value="New">
  <el-button>更新</el-button>
</el-badge>

小红点模式

设置 is-dot 为 true 时仅显示红点，不展示具体数值。

<el-badge is-dot>
  <el-button icon="el-icon-share"></el-button>
</el-badge>

徽章位置

通过 type 设置徽章颜色类型（primary/success/warning/danger/info），通过 placement 调整位置（top-right/top-left/bottom-right/bottom-left）。

<el-badge :value="3" placement="bottom-right" type="success">
  <el-button>任务</el-button>
</el-badge>

独立使用徽章

徽章可独立于其他元素使用，通过 CSS 调整定位。

<el-badge :value="1" class="standalone-badge"></el-badge>
<style>
.standalone-badge {
  margin-left: 10px;
}
</style>

注意事项

• 动态修改 value 需通过 Vue 响应式数据实现。
• 复杂样式建议通过插槽或 CSS 覆盖实现。
• 移动端需注意触摸区域，避免徽章遮挡操作。