# 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
第二种: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
显示为圆点

通过 dot 属性设置badge是否显示为圆点,为true时value失效。

<fui-badge :dot="true"></fui-badge>
<fui-badge type="success" :dot="true"></fui-badge>
1
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时触发 -

示例预览

# 示例代码地址

FirstUIBadge 徽章
Last Updated: 1/29/2024, 6:27:37 PM