# t-text-price

TextPrice 价格文本

t-text-price 组件介绍

t-text-price 是用于格式化显示金额的文本组件，支持自定义货币符号、小数位数和千分位分隔符，适用于商品价格、账单金额等场景。

t-text-price 平台兼容

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

t-text-price 基础用法

基础用法参考 demo/text-price/text-price.uvue。

<template>
	<view class='p-15'>
		<tui-theme-switch></tui-theme-switch>
		<t-card title="Text 金额"
				class="mb-15"
				sub-title="显示金额"></t-card>

		<view :class="[`fl tvg tpm trm mb-15 faic fjcb`]">
			<text :class="[`ttl1 tfsm`]">保留两位小数</text>
			<t-text-price type="warning" @click="test"
						  :decimals="2">{{money}}</t-text-price>
		</view>
		<view :class="[`fl tvg tpm trm mb-15 faic fjcb`]">
			<text :class="[`ttl1 tfsm`]">自动补零</text>
			<t-text-price type="success"
						  :decimals="5">81681.25</t-text-price>
		</view>
		<view :class="[`fl tvg tpm trm mb-15 faic fjcb`]">
			<text :class="[`ttl1 tfsm`]">自定义符号</text>
			<t-text-price type="primary"
						  :decimals="3"
						  integer-class="s-30"
						  decimal-point="$">99.025</t-text-price>
		</view>

		<view :class="[`fl tvg tpm trm mb-15 faic fjcb`]">
			<text :class="[`ttl1 tfsm`]">中文大写金额</text>
			<t-text-price type="success"
						  uppercase>81681.25</t-text-price>
		</view>

		<view :class="[`mb-15 r-10 p-10 tvg`]">
			<text :class="[`ttl1 tfsm sfwb`]">组合使用</text>
			<view class="">
				<t-text-price class="mtb-15"
							  type="primary"
							  :decimals="2"
							  size="large">81681.25</t-text-price>
				<t-text-price type="success"
							  uppercase>81681.25</t-text-price>
			</view>
		</view>
		<view :class="[`mb-15 r-10 p-10 tvg`]">
			<text :class="[`ttl1 tfsm sfwb`]">自定义样式覆盖主题</text>
			<t-text-price type="primary"
						  class="mtb-15"
						  integer-class="s-30"
						  :decimals="2">81681.25885</t-text-price>
			<t-text-price type="success"
						  class="mb-15"
						  integer-class="s-30"
						  decimal-class="c-red"
						  currency-class="sfwb"
						  :decimals="2">81681.25885</t-text-price>
		</view>
	</view>
</template>
<script setup>
	import { ref } from "vue"
	const money = ref(81681.25885)
	function test(){
		money.value=15456.56
	}
</script>

t-text-price Props

属性名	说明	类型	默认值
text	需要格式化的金额	string | number	''
decimals	显示的小数位数	number	0
decimalPoint	货币符号	string	'￥'
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	true
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	''
size	组件尺寸，可选 large、medium、small、mini	string	'medium'

t-text-price Events

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