当前位置：首页 > 前端教程

elementui徽章

2026-03-05 23:11:54前端教程

ElementUI 徽章（Badge）使用指南

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

基础用法

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

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

最大值设置

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

elementui徽章

<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 时仅显示红点，不展示具体数值。

elementui徽章

<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 覆盖实现。
移动端需注意触摸区域，避免徽章遮挡操作。

标签: 徽章 elementui

分享给朋友：

elementui license

ElementUI 的许可证信息 ElementUI 是一款基于 Vue.js 的组件库，其许可证采用 MIT License。以下是关键点： MIT License 是一种宽松的开源许可证…

elementui import

安装 Element UI 在项目中安装 Element UI 可以通过 npm 或 yarn 完成： npm install element-ui --save # 或 yarn add el…

移植elementui

移植 Element UI 的方法 Element UI 是一个基于 Vue.js 的组件库，移植通常涉及从旧项目迁移到新项目或升级版本。以下是常见的移植方法：安装 Element UI 在目标项…

elementui install

安装 Element UI Element UI 是一个基于 Vue.js 的组件库，安装过程简单，可以通过 npm 或 yarn 进行安装。使用 npm 安装： npm install ele…

elementui selecttree

使用 ElementUI 的 TreeSelect 组件 ElementUI 提供了 el-tree-select 组件，用于结合树形结构和下拉选择功能。以下是其基本用法和常见配置。基本使用…

elementui切换

使用 Element UI 进行切换操作 Element UI 提供多种组件可用于切换操作，如 el-switch、el-tabs、el-radio 等。以下是几种常见切换场景的实现方法。使用…

elementui徽章