Skip to content

Badge-DEMO


vue
<fv-Badge :modelValue="3">
    <fv-button>Badge</fv-button>
</fv-Badge>

Badge Different Type


Success

vue
<fv-Badge :modelValue="12" type="success">
    <fv-button>Badge</fv-button>
</fv-Badge>

Warning

vue
<fv-Badge :modelValue="2" type="warning">
    <fv-button>Badge</fv-button>
</fv-Badge>

Primary

vue
<fv-Badge :modelValue="9" type="primary">
    <fv-button>Badge</fv-button>
</fv-Badge>

Badge Customize Content


vue
<fv-Badge value="You">
    <fv-button>Badge</fv-button>
</fv-Badge>

Badge Max Value


vue
<fv-Badge modelValue="100" max="99">
    <fv-button>Badge</fv-button>
</fv-Badge>

Badge Dot


vue
<fv-Badge :isDot="true">
    <fv-button>Badge</fv-button>
</fv-Badge>

属性


属性类型必填默认值说明
modelValuestring''
maxanyInfinity
isDotbooleanfalse
hiddenbooleanfalse
typestring'default'Badge类型,可以输入颜色字符串。
themestring'global'参见组件的 theme 选项。
disabledbooleanfalse参见组件的 disabled 选项。
langstring"global"参见组件的 lang 选项。

插槽


  1. Default
javascript
<fv-badge>
    <div></div>
</fv-badge>

MIT Licensed