Number 数字

数字组件用于在页面上显示自定义字体的数字，支持不同的数字模式。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title='数字'>
		<t-card class='mlrt.30' title="Number 数字"
			sub-title="两种字体风格，并允许主题颜色与字体大小的定制，使其在电商促销、金融数据展示等场景中尤为突出，增强了页面的视觉效果和用户交互体验。"></t-card>
		<introduction title="基础使用+显示类型">
			<t-number mode='gl' class="mb.20-s.45">1234567890.00</t-number>
			<t-number mode='gl' class="mb.20-s.45" type="info">1234567890.00</t-number>
			<t-number mode='gl' class="mb.20-s.45" type="primary">1234567890.00</t-number>
			<t-number mode='gl' class="mb.20-s.45" type="warning">1234567890.00</t-number>
			<t-number mode='gl' class="mb.20-s.45" type="success">1234567890.00</t-number>
			<t-number mode='gl' class="s.45" type="error">1234567890.00</t-number>
		</introduction>
		<introduction title="基础使用+显示类型">
			<t-number class="mb.20">1234567890.00</t-number>
			<t-number class="mb.20" type="info">1234567890.00</t-number>
			<t-number class="mb.20" type="primary">1234567890.00</t-number>
			<t-number class="mb.20" type="warning">1234567890.00</t-number>
			<t-number class="mb.20" type="success">1234567890.00</t-number>
			<t-number type="error">1234567890.00</t-number>
		</introduction>
		<introduction title="自定义颜色(覆盖主题)" content-class="fl">
			<t-number class="c.blue">200</t-number>
			<t-number mode='gl' class="c.blue-slh.100">300</t-number>
		</introduction>
		<introduction title="字体大小">
			<t-row class="faie">
				<t-number class="s.24-c.#ff5500">123</t-number>
				<t-number mode='gl' class="s.48-c.#0055ff">678</t-number>
			</t-row>
		</introduction>
		<introduction title="使用场景展示">
			<t-count-down :time="5000000">
				<template v-slot:default="{ hours,minutes,seconds }">
					<t-row class="fl">
						<view class="timers-sty">
							<t-number class="mb.20" type="primary">{{hours}}</t-number>
						</view>
						<text class="pl">:</text>
						<view class="timers-sty">
							<t-number class="mb.20" type="primary">{{minutes}}</t-number>
						</view>
						<text class="pl">:</text>
						<view class="timers-sty">
							<t-number class="mb.20" type="primary">{{seconds}}</t-number>
						</view>
					</t-row>
				</template>
			</t-count-down>
			<t-count-down :time="5000000">
				<template v-slot:default="{ hours,minutes,seconds }">
					<t-row class="fl">
						<view class="timers-sty">
							<t-number mode='gl' class="mb.20" type="s" size='l'>{{hours}}</t-number>
						</view>
						<text class="pl">:</text>
						<view class="timers-sty">
							<t-number mode='gl' class="mb.20" type="s" size='l'>{{minutes}}</t-number>
						</view>
						<text class="pl">:</text>
						<view class="timers-sty">
							<t-number mode='gl' class="mb.20" type="s" size='l'>{{seconds}}</t-number>
						</view>
					</t-row>
				</template>
			</t-count-down>
		</introduction>
		<t-col class='h.50'></t-col>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {
			onTap(e : UTSJSONObject) {
				console.log(e)
			}
		}
	}
</script>

<style>
	.t-wrap {
		padding-bottom: 96rpx;

	}

	.t-section__title {
		margin-top: 64rpx;
	}

	.t-flex {
		align-items: flex-end;
	}
</style>

Props

名称	描述	类型	默认值
mode	数字模式	String	'dig'

Events

名称	描述	参数
click	当数字被点击时触发	-