SepBadge 徽标组件 v1.0.0
右上角数值/红点徽标 · 支持 max 封顶 / dot 圆点 / status 预设色 / color 自定义色 / offset 偏移
1. 基础用法(独立显示 / 包裹内容)
HTML 声明式标签
JS API 初始化(包裹内容,徽标定位右上角)
2. max 数值封顶(超过显示 99+)
HTML 声明式标签
JS API 初始化
3. dot 圆点模式(只显示红点)
HTML 声明式标签
JS API 初始化(包裹内容 + 圆点)
4. status 预设色(success / warning / error / info)
HTML 声明式标签(数值)
HTML 声明式标签(圆点)
JS API 初始化
5. color 自定义颜色
HTML 声明式标签
JS API 初始化
6. offset 偏移量([x, y] px)
HTML 声明式标签
JS API 初始化
7. visible 显示/隐藏
HTML 声明式标签
JS API 控制
visible: true
8. API 控制(setValue / setDot / setColor / setStatus)
HTML 声明式标签(初始值)
JS API 初始化
9. onClick 事件回调
HTML 声明式标签(onClick 绑定全局函数)
JS API 初始化
点击徽标触发
10. 包裹内容场景(消息图标 / 按钮 / 文字)
HTML 声明式标签(子节点作为 content)
JS API 初始化
11. 组件配合示例(Button / Checkbox / Switch)
HTML 声明式标签(子组件作为 content)
JS API 初始化
Badge + Button(消息未读数)
Badge + Icon Button(红点提醒)
Badge + Checkbox(选项数量)
Badge + Switch(状态指示)
12. showZero(0 值是否显示)
HTML 声明式标签
JS API 初始化
13. position(位置:top-right / top-left / bottom-right / bottom-left)
HTML 声明式标签
JS API 初始化
14. pulse(脉冲呼吸动画)
HTML 声明式标签
JS API 初始化
15. size(尺寸:default / small / large)
HTML 声明式标签
JS API 初始化
16. showPlus(封顶符号 +)
HTML 声明式标签
JS API 初始化
17. processing(加载中状态)
HTML 声明式标签
JS API 初始化
18. borderColor(边框颜色)/ title(悬停提示)
HTML 声明式标签(鼠标悬停查看 title)
JS API 初始化