# t-number

Number 数字

t-number 组件介绍

数字组件，两种字体风格，并允许主题颜色与字体大小的定制，使其在电商促销、金融数据展示等场景中尤为突出，增强了页面的视觉效果和用户交互体验。

t-number 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-number 基础用法

基础用法参考 demo/number/number.uvue，支持主题色与字体大小定制。

<template>
	<view>
		<tui-theme-switch></tui-theme-switch>
		<t-card class='mlrt-15'
				title="Number 数字"
				sub-title="两种字体风格，并允许主题颜色与字体大小的定制，使其在电商促销、金融数据展示等场景中尤为突出，增强了页面的视觉效果和用户交互体验。"></t-card>
		<introduction title="自定义颜色(覆盖主题)">
			<t-number class="mb-10 s-22 r-10 p-10 c-blue">200</t-number>
			<t-number class="mb-10 s-22 r-10 p-10 c-blue slh-50">300</t-number>
		</introduction>
		<introduction title="字体大小">
			<t-row class="faie">
				<t-number class="mb-10 s-22 r-10 p-10 s-12 c-#ff5500">123</t-number>
				<t-number type="error"
						  class="mb-10 s-22 r-10 p-10 s-24 c-#0055ff">678</t-number>
			</t-row>
		</introduction>
		<introduction title="基础使用+显示类型">
			<t-number class="mb-10 s-22 r-10 p-10">1234567890-00</t-number>
			<t-number class="mb-10 s-22 r-10 p-10"
					  type="info"
					  size="large">1234567890-00</t-number>
			<t-number class="mb-10 s-22 r-10 p-10"
					  type="primary">1234567890-00</t-number>
			<t-number class="mb-10 s-22 r-10 p-10"
					  type="warning"
					  size="small">1234567890-00</t-number>
			<t-number class="mb-10 s-22 r-10 p-10"
					  type="success"
					  size="mini">1234567890-00</t-number>
			<t-number class="s-22 r-10 p-10"
					  type="error">1234567890-00</t-number>
		</introduction>
		<introduction title="基础使用+显示类型">
			<t-number class="mb-10 s-22 r-10 p-10"
					  effect="normal">1234567890-00</t-number>
			<t-number class="mb-10 s-22 r-10 p-10"
					  effect="dark"
					  type="info">1234567890-00</t-number>
			<t-number class="mb-10 s-22 r-10 p-10"
					  effect="normal"
					  type="primary">1234567890-00</t-number>
			<t-number class="mb-10 s-22 r-10 p-10"
					  effect="light"
					  type="warning">1234567890-00</t-number>
			<t-number class="mb-10 s-22 r-10 p-10"
					  effect="plain"
					  type="success">1234567890-00</t-number>
			<t-number type="error"
					  class="mb-10 s-22 r-10 p-10">1234567890-00</t-number>
		</introduction>
		<t-col class='h-25'></t-col>
	</view>
</template>

<script setup>
	function onTap(e : UniPointerEvent) {
		console.log(e)
	}
</script>

t-number Props

属性名	类型	默认值	说明	可选值
size	String	""	组件尺寸	large, medium, small, mini
type	String	""	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	"normal"	组件显示主题	normal, dark, light, plain
mode	String	"dig"	数字显示模式	dig, gl

Mode 说明

模式值	说明	字体风格
dig	电子钟数字样式	数码管风格字体
gl	GL样式	现代风格字体

t-number Events

事件名	说明	回调参数
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成触发	组件的节点信息
touchstart	触摸开始时触发	触摸事件对象
touchend	触摸结束时触发	触摸事件对象
touchmove	触摸移动时触发	触摸事件对象
touchcancel	触摸取消时触发	触摸事件对象

t-number Slots

插槽名	说明
default	内容插槽，用于放置数字内容