更新记录
1.0.0(2023-05-03)
下载此版本
完成
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue app-nvue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
Badge 角标
参数
参数 |
说明 |
类型 |
可选值 |
默认值 |
model-value |
文本内容 |
string |
max |
最大值 |
number |
is-dot |
是否点状显示 |
boolean |
|
false |
hidden |
是否隐藏 |
boolean |
|
false |
type |
类型 |
primary / success / error / warning |
示例
基础用法
<ayi-badge :value="16">
<ayi-button>消息</ayi-button>
</ayi-badge>
自定义内容
<ayi-badge value="NEW">
<ayi-button>自定义内容</ayi-button>
</ayi-badge>
最大值
<ayi-badge :value="132" :max="99">
<ayi-button>最大</ayi-button>
</ayi-badge>
点形状
<ayi-badge :value="132" is-dot>
<ayi-button>点形状</ayi-button>
</ayi-badge>
不同状态
<ayi-badge type="primary" is-dot>
<ayi-button>主要</ayi-button>
</ayi-badge>
<ayi-badge type="success" value="Hot">
<ayi-button>成功</ayi-button>
</ayi-badge>
<ayi-badge type="error" is-dot>
<ayi-button>失败</ayi-button>
</ayi-badge>
<ayi-badge type="warning" :value="20">
<ayi-button>警告</ayi-button>
</ayi-badge>