# 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
第二种: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

注意:非nvue端,可通过css变量全局修改按钮type类型对应的颜色,css变量参考 自定义主题

显示为圆点

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

<fui-badge dot></fui-badge>
<fui-badge type="warning" dot></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 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 -

# Events

事件名 说明 回调参数
@click 点击badge时触发 -

示例预览

# 示例代码地址

FirstUIBadge 徽章
Last Updated: 9/29/2022, 1:07:59 AM