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

elementui徽章

2026-01-15 19:54:12前端教程

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>

独立使用

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

elementui徽章

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

注意事项

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

官方文档参考：ElementUI Badge

标签: 徽章 elementui

分享给朋友：

elementui高级

ElementUI 高级用法与技巧 ElementUI 是基于 Vue.js 的流行组件库，适用于快速开发中后台系统。以下是一些高级用法和优化技巧，帮助提升开发效率和用户体验。自定义主题与样式覆盖…

elementui引用

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

elementui重写

重写 Element UI 组件的方法 Element UI 是一个基于 Vue.js 的组件库，重写其组件可以通过以下几种方式实现，具体取决于需求场景。全局样式覆盖通过修改 CSS 变量或覆盖…

elementui教程

ElementUI 教程 ElementUI 是基于 Vue.js 的桌面端组件库，提供丰富的 UI 组件，适用于快速开发企业级应用。以下是基础教程和进阶使用指南。安装与引入通过 npm 安…

替代elementui

替代 ElementUI 的 UI 框架推荐 ElementUI 是基于 Vue 2.x 的组件库，若需替代方案，可考虑以下框架： Vue 2.x 兼容方案 1. Ant Design Vue…

elementui标签

ElementUI 标签的基本使用 ElementUI 提供 <el-tag> 组件用于展示标签信息，支持多种样式和交互功能。基础用法通过 type 属性设置标签类型，可选值包括…

elementui徽章