elementui徽章

ElementUI 徽章（Badge）使用方法

ElementUI 的徽章组件（el-badge）用于在界面上显示标记、通知数量或状态提示，常与按钮、图标等结合使用。以下是其核心功能和用法：

基础用法

通过 value 属性设置显示的数字或文本：

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

最大值设置

通过 max 属性限制显示的最大值（超出时显示 ${max}+）：

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

自定义内容

value 可以是字符串或模板：

<el-badge value="NEW" class="item">
  <el-button>更新</el-button>
</el-badge>

小红点模式

设置 is-dot 属性显示红点（无数字）：

<el-badge is-dot class="item">
  <el-button>待办</el-button>
</el-badge>

徽标位置

通过 type 属性设置颜色类型（可选 primary/success/warning/danger/info）：

<el-badge :value="3" type="warning" class="item">
  <el-button>警告</el-button>
</el-badge>

独立使用

徽章可独立显示（不包裹子元素）：

<el-badge :value="1" style="margin-right: 40px;" />

注意事项

• 徽章默认定位为 absolute，需确保父元素有 position: relative。
• 可通过 CSS 覆盖样式（如 .el-badge__content 调整颜色或位置）。

官方文档参考：ElementUI Badge