# Number 数字 V2.3.0+

概述

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

App-vue	App-Nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

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

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

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

1
2
3
4
5
6

第二种：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></fui-number>

插槽名称	说明
-	-

属性名	类型	说明	默认值	平台差异说明
text	Number,String	数字内容	-	-
size	Number, String	字体大小	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	Number, String	自定义参数，点击事件中回传	-	-

事件名	说明	回调参数
@click	点击数字时触发	{ text:数字内容 param:自定义参数 }