# Badge 徽章
概述
Badge 徽章，可自定义颜色。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiBadge from "@/components/firstui/fui-badge/fui-badge.vue"
export default {
components:{
fuiBadge
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
基础使用
通过 value 属性设置展示的文本，type 属性设置badge的类型。
<fui-badge value="1"></fui-badge>
<fui-badge type="success" value="2"></fui-badge>
1
2
2
注意：非nvue端，可通过css变量全局修改按钮type类型对应的颜色，css变量参考 自定义主题。
显示为圆点
通过 dot 属性设置badge是否显示为圆点，为true时value失效。
<fui-badge dot></fui-badge>
<fui-badge type="warning" dot></fui-badge>
1
2
2
自定义颜色
通过 background 属性设置badge背景颜色，color 属性设置字体颜色。
<fui-badge value="6" background="#eee" color="#333"></fui-badge>
1
# Slots
| 插槽名称 | 说明 |
|---|---|
| - | - |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| value | Number, String | badge显示文本 | - | - |
| max V1.5.0+ | Number, String | 最大值，当值超过max时使用+号代替，仅为数字时有效，-1表示不限制 | -1 | - |
| type | String | 类型，有效值：primary，success，warning，danger，purple，white | primary | - |
| background | String | 背景色，如果设置背景色则type失效 | - | - |
| color | String | 字体颜色 | #FFFFFF | - |
| dot | Boolean | 是否显示为圆点 | false | - |
| marginTop | Number, String | margin-top值，单位rpx | 0 | - |
| marginLeft | Number, String | margin-left值，单位rpx | 0 | - |
| marginRight | Number, String | margin-right值，单位rpx | 0 | - |
| absolute | Boolean | 是否绝对定位 | false | - |
| top | String | top值，absolute为true时生效 | -8rpx | - |
| right | String | right值，absolute为true时生效 | -18rpx | - |
| scaleRatio | Number | 缩放比例 | 1 | - |
TIP
注: nvue android端元素默认超出隐藏，绝对定位时Badge请勿超出父级元素，应留出足够的空间。
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @click | 点击badge时触发 | - |
Badge 徽章