Number 数字

概述

Number 数字，DigitalNumbers字体，仅支持数字和小数点。

支持平台

目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。

安卓系统版本	安卓uni-app	安卓uniapp-x	iOS系统版本	iOS uniapp	iOS uniapp-x	小程序	H5/Web
5.0	×	✓	9.0	×	×	×	✓

引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiNumber from "@/components/firstui/fui-number/fui-number.uvue"
export default {
	components:{
		fuiNumber
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 text 属性设置数字内容。

<fui-number text="1234567890.00"></fui-number>

调整颜色

通过 text 属性设置数字内容， color 属性设置字体颜色。

<fui-number text="200" color="#465CFF"></fui-number>

调整字体大小

通过 text 属性设置数字内容， color 属性设置字体颜色， size 属性设置是字体大小。

<fui-number text="678" color="#FFB703" :size="48"></fui-number>

加粗/点击效果

通过 text 属性设置数字内容， color 属性设置字体颜色， size 属性设置字体大小，fontWeight 属性设置字体粗细程度，highlight 属性设置是否有点击效果。

<fui-number :text="520" color="#09BE4F" :size="64" fontWeight="bold" :highlight="true"></fui-number>

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
text	Number,String	数字内容	-	-
size	Number	字体大小	32	-
unit	String	字体大小单位，可选值：rpx、px	rpx	-
color	String	字体颜色	#333	-
fontWeight	String	字重	normal	-
disabled	Boolean	是否禁用点击，设置为true则点击事件及效果失效	false	-
highlight	Boolean	是否有点击效果	false	-
decoration	String	文本的修饰，可选值：none、 underline、line-through等	none	不建议设置underline
lineHeight	Boolean	是否将行高设置与字体大小一致	false	-
param	String	自定义参数，点击事件中回传	-	-

Events

事件名	类型	说明	回调参数
@onclick	(event: FuiNumberClickParam) => void	点击数字时触发	FuiNumberClickParam

FuiNumberClickParam

/**
* fui-number 数字组件 @onclick 事件 回调参数类型
* @description this.$emit('onclick',FuiNumberClickParam)
* @param {string} text {string} 数字文本内容
* @param {string} param {string} 自定义参数 
*/
export type FuiNumberClickParam = {
	text : string;
	param : string;
}

/*页面引入*/
import { FuiNumberClickParam } from '@/components/firstui/fui-types/index.uts'

示例预览

示例代码地址

Number 数字