official/public/docset/ui/wc-badge.md

WC-BADGE

按钮和图标上的数字或状态标记。

基础用法

可以用来展示新消息的数量。
数量值可接受 Number 或 String。

import '//jscdn.ink/@bd/ui/latest/space/index.js' import '//jscdn.ink/@bd/ui/latest/badge/index.js' import '//jscdn.ink/@bd/ui/latest/form/button.js'

document.querySelectorAll('wc-badge').forEach(item=>{ item.addEventListener('click',function(e){ this.value++ }) })

primary info success help secondary warning wc-badge{ margin-right:15px; }

最大值

你还可以自定义最大值
由 max 属性定义，接受 Number 值。 请注意，仅在值也是 Number 时起作用。 import '//jscdn.ink/@bd/ui/latest/space/index.js' import '//jscdn.ink/@bd/ui/latest/badge/index.js' import '//jscdn.ink/@bd/ui/latest/form/button.js' info info wc-badge{ margin-right:15px; }

自定义显示内容

当 value 是 String 时，可以显示自定义文字。

import '//jscdn.ink/@bd/ui/latest/space/index.js' import '//jscdn.ink/@bd/ui/latest/badge/index.js' import '//jscdn.ink/@bd/ui/latest/form/button.js'

comments replies wc-badge{ margin-right:20px; }

小红点

通过一个小红点标记来告知用户有新内容。
使用 is-dot 属性。 是个布尔值。 import '//jscdn.ink/@bd/ui/latest/space/index.js' import '//jscdn.ink/@bd/ui/latest/badge/index.js' import '//jscdn.ink/@bd/ui/latest/form/button.js' query visits

wc-badge{ margin-right:20px; }

完整APIs

属性	值类型	默认值	描述
value	String	无	标记绑定值
type	String	无	标记类型, 仅能决定标记的颜色, 无额外作用, 可选值有: primary、info、success、warning、default、secondary、danger
max	Number	无	最大值，超过最大值会显示 {max}+。 只有当 value 是数字类型时起作用。
hidden	Boolean	false	为true时隐藏标记
is-dot	Boolean	false	是否开启小圆点模式