t-text-price

TextPrice 价格文本

组件介绍

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

平台兼容

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

基础用法

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

<template>
  <view class="text-price-demo">
    <!-- 默认格式 -->
    <t-text-price text="1234567.89"></t-text-price>
    
    <!-- 显示两位小数 -->
    <t-text-price text="1234567.89" :decimals="2"></t-text-price>
    
    <!-- 自定义货币符号 -->
    <t-text-price text="1234567.89" decimalPoint="$"></t-text-price>
    
    <!-- 整数金额 -->
    <t-text-price text="1234567.89" :decimals="0"></t-text-price>
  </view>
</template>

<style scoped>
.text-price-demo {
  padding: 40rpx;
}
</style>

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'

Events

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