SuperAPI AI 工具集

el-badge

前端与建站

查看项目

更新于 10-15 23:32

技能介绍

用途:el-badge 是 Element Plus 提供的徽标组件,用于在按钮、图标等元素上叠加数字或状态标记,常见于通知计数、状态指示、未读消息提醒和注意力标记等场景。

主要能力:支持通过 value 显示数字或文本;max 设置最大值,超出时显示为 {max}+;is-dot 显示为小红点;hidden 控制隐藏;type 选择 primary、success、warning、danger、info 类型,默认 danger;show-zero 控制值为零时是否显示;color 设置圆点背景色;offset 调整徽标偏移;badge-style 与 badge-class 自定义样式和类名。提供 default 与 content 两个插槽,content 插槽参数为 { value: string }。

使用方式:在模板中以 <el-badge> 包裹目标元素,通过属性控制显示。例如基础用法 <el-badge :value="12"><el-button>comments</el-button></el-badge>;最大值 <el-badge :value="200" :max="99">;自定义文本 value="new";红点 is-dot;偏移 :offset="[10, 10]"。通知场景可结合响应式变量,如 :hidden="unreadCount === 0"。

适用场景:按钮或图标上的通知数量、未读消息提示、状态点标记等。

限制与建议:资料未提供安装命令、版本要求或收费信息。建议使用 max 防止大数字溢出,简单状态用 is-dot,计数为零且 show-zero 为 false 时设置 hidden。