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 初始化

19. 自动化断言