# Badge 徽章
概述
Badge 徽章，可自定义颜色。
# 支持平台
目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。
| 安卓系统版本 | 安卓uni-app | 安卓uniapp-x | iOS系统版本 | iOS uniapp | iOS uniapp-x | 小程序 | H5/Web |
|---|---|---|---|---|---|---|---|
| 5.0 | × | ✓ | 9.0 | × | × | × | ✓ |
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiBadge from "@/components/firstui/fui-badge/fui-badge.uvue"
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
显示为圆点
通过 dot 属性设置badge是否显示为圆点，为true时value失效。
<fui-badge :dot="true"></fui-badge>
<fui-badge type="success" :dot="true"></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 | Number | 最大值，当值超过max时使用+号代替，仅为数字时有效，-1表示不限制 | -1 | - |
| type | String | 类型，有效值：primary，success，warning，danger，purple，white | primary | - |
| background | String | 背景色，如果设置背景色则type失效 | - | - |
| color | String | 字体颜色 | #FFFFFF | - |
| dot | Boolean | 是否显示为圆点 | false | - |
| marginTop | Number | margin-top值，单位rpx | 0 | - |
| marginLeft | Number | margin-left值，单位rpx | 0 | - |
| marginRight | Number | margin-right值，单位rpx | 0 | - |
| absolute | Boolean | 是否绝对定位 | false | - |
| top | String | top值，absolute为true时生效 | -8rpx | - |
| right | String | right值，absolute为true时生效 | -18rpx | - |
| scaleRatio | Number | 缩放比例，当比例大于1时，外层容器需要设置 overflow: visible或者留出足够空间，避免显示不全 | 1 | - |
# Events
| 事件名 | 类型 | 说明 | 回调参数 |
|---|---|---|---|
| @onclick | () => void | 点击badge时触发 | - |
Badge 徽章