Skip to content
双端兼容 · 桌面 + 移动

Badge 徽标

EwBadge 是附在其它元素角上的计数徽标:未读消息数、通知数等。提供数字上限折叠(99+)与 纯圆点两种形态,底色可用 color 覆写以适配不同场景。

基础用法

附着在图标按钮上
徽标需要父级 position: relative,用绝对定位挂在右上角。
799+
vue
<span style="position:relative; display:inline-flex;">
  <EwIconButton icon="mail" variant="soft" />
  <EwBadge value="7" style="position:absolute; top:-6px; right:-6px;" />
</span>

上限折叠

超过 max 显示 max+
数字计数值超过 max(默认 99)时折叠为 max+,避免长数字撑破布局。
4299+999+
vue
<EwBadge value="42" />
<EwBadge value="150" /> <!-- 渲染为 99+ -->
<EwBadge value="1500" :max="999" /> <!-- 渲染为 999+ -->

API

Props

属性说明类型默认值
value计数值string / number
max上限,数值超过时显示 max+number99
dot圆点模式(不显示数字)booleanfalse
color自定义底色string

插槽

插槽说明
default覆写徽标内容(dot 模式下无效)

基于 MIT 许可证发布