Badge 徽章

Badge 徽章

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

基础用法

可以用来展示新消息的数量。

通过设置 value 来调整标记所展示的内容，支持 Number or String 作为参数

<template>
  <el-badge :value="12" class="item">
    <el-button>comments</el-button>
  </el-badge>
  <el-badge :value="3" class="item">
    <el-button>replies</el-button>
  </el-badge>
  <el-badge :value="1" class="item" type="primary">
    <el-button>comments</el-button>
  </el-badge>
  <el-badge :value="2" class="item" type="warning">
    <el-button>replies</el-button>
  </el-badge>
  <el-dropdown trigger="click">
    <span class="el-dropdown-link">
      Click Me
      <el-icon class="el-icon--right"><caret-bottom /></el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item class="clearfix">
          comments
          <el-badge class="mark" :value="12" />
        </el-dropdown-item>
        <el-dropdown-item class="clearfix">
          replies
          <el-badge class="mark" :value="3" />
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script lang="ts" setup>
import { CaretBottom } from '@element-plus/icons-vue'
</script>
<style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
.el-dropdown {
  margin-top: 1.1rem;
}
</style>

最大值

你还可以自定义最大值

由max属性定义，它接受一个Number，要注意的是，该值当且仅当在 value 的值也是 Number 时生效。

<template>
  <el-badge :value="200" :max="99" class="item">
    <el-button>comments</el-button>
  </el-badge>
  <el-badge :value="100" :max="10" class="item">
    <el-button>replies</el-button>
  </el-badge>
</template>
<style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>

自定义显示内容

你也可以展示除数字以外你想要展示的任何值。

当 value 是一个 String 类型当时候，你可以展示任何你想展示的内容。

<template>
  <el-badge value="new" class="item">
    <el-button>comments</el-button>
  </el-badge>
  <el-badge value="hot" class="item">
    <el-button>replies</el-button>
  </el-badge>
</template>
<style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>

小红点

通过一个小红点标记来告知用户有新内容。

除了数字外，设置is-dot属性，它接受一个Boolean 类型作为参数。

<template>
  <el-badge is-dot class="item">query</el-badge>
  <el-badge is-dot class="item">
    <el-button class="share-button" :icon="Share" type="primary" />
  </el-badge>
</template>
<script lang="ts" setup>
import { Share } from '@element-plus/icons-vue'
</script>
<style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>

Badge API

Badge 属性

属性	说明	类型	默认值
`value`	显示值	`string \| number`	`‘’`
`max`	最大值，超过最大值会显示 `{max}+`。只有当 `value` 是数字类型时才会工作。	`number`	`99`
`is-dot`	是否显示小圆点。	`boolean`	`false`
`hidden`	是否隐藏 Badge。	`boolean`	`false`
`type`	badge 类型。	`‘primary’ \| ‘success’ \| ‘warning’ \| ‘danger’ \| ‘info’`	`‘danger’`

Badge 插槽

插槽名	说明
`default`	自定义默认内容

源代码

组件 • 文档

贡献者