Number 数字 V2.3.0+

概述

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

引入

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

第一种：在页面json文件中引入

{
  "navigationBarTitleText": "数字",
  "usingComponents": {
    "fui-number":"/components/firstui/fui-number/fui-number"
  }
}

第二种：在根目录app.json文件中全局引入

  "usingComponents": {
      "fui-number":"components/firstui/fui-number/fui-number"
  }

代码演示

部分示例演示，完整使用请参考示例程序以及文档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>

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	其他说明
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	自定义参数，点击事件中回传	-	-

Events

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

示例预览