elementui badge

ElementUI Badge 基本用法

ElementUI 的 Badge 组件用于显示数字或状态标记，通常附加在按钮、图标等元素上。基础用法通过el-badge标签实现，value属性设置显示内容。

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

自定义标记内容

通过默认插槽可自定义标记内容，支持文本或HTML。is-dot属性可切换为小圆点样式。

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

最大值与隐藏控制

max属性限制数字最大值，超出时显示max+。hidden属性可强制隐藏标记。

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

不同类型标记

通过type属性设置标记颜色，可选值包括：

• primary（默认）
• success
• warning
• danger
• info

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

独立使用场景

Badge 可不包裹内容独立使用，通过value直接显示标记。

<el-badge :value="newMessages" class="item"></el-badge>

样式覆盖技巧

通过CSS可调整标记位置和样式。例如修改偏移量：

.el-badge__content {
  top: 10px;
  right: 20px;
}

动态更新示例

结合Vue数据绑定实现动态更新：

data() {
  return {
    count: 0
  }
},
methods: {
  increment() {
    this.count++
  }
}

<el-badge :value="count">
  <el-button @click="increment">点击增加</el-button>
</el-badge>