你当前查看的文档是tmui3.2.0（已不再支持NVUE）

[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

展示组件

金额栅格 TmMoney

对金额进行栅格化

🌶️ 示例

查看模拟效果＋

示例模板

<template>
    <view>
        <tm-sheet>
            <tm-text font-size="36" class="text-weight-b mb-16 d-block">金额栅格 TmMoney</tm-text>
            <view>
                <tm-text>考虑到这个比较常用，输入金额为数字即可，可以放心的使用保证精度，不采用toFiexd，保证金额精度无舍入</tm-text>
            </view>
        </tm-sheet>
   
        <tm-sheet class="flex flex-row flex-row-center-between">
            <tm-text>默认2位小数</tm-text>
            <tm-money :modelValue="1568"></tm-money>
        </tm-sheet>

        <tm-sheet class="flex flex-row flex-row-center-between">
            <tm-text>开启千分位,小数位为3</tm-text>
            <tm-money :thousand="true" :digit="3" fontSize="30" :modelValue="15568.398"></tm-money>
        </tm-sheet>
        <tm-sheet class="flex flex-row flex-row-center-between">
            <tm-text>千分位为4分割</tm-text>
            <tm-money :thousand="true" :thousandLen="4" :digit="3" :modelValue="15568.398"></tm-money>
        </tm-sheet>
        <tm-sheet class="flex flex-row flex-row-center-between">
            <tm-text>字号控制</tm-text>
            <tm-money :thousand="true" fontSize="48" :digit="3" :modelValue="15568.398"></tm-money>
        </tm-sheet>
        <tm-sheet>
            <tm-text>大写金额（仅到厘,不要超过后4位）</tm-text>
            <view class="flex flex-row flex-row-center-start">
                <tm-money color="warn" darkColor="warn" :showCn="false" fontSize="48" :digit="4"
                :modelValue="money"></tm-money>
                <tm-money class="ml-8" :showCn="true" :digit="4" :modelValue="money"></tm-money>
            </view>
            <tm-button class="mt-n8" :block="true" @click="money = money == 1568.3984 ? 1548.36 : 1568.3984">试试修改金额</tm-button>
        </tm-sheet>
        <tm-sheet>
            <tm-text>去除小数，把小数置0即可，要注意我不会舍入，是直接丢掉小数</tm-text>
            <tm-money :showCn="false" :digit="0" :modelValue="1568.398"></tm-money>
            <tm-text>可以直接写style修改样式</tm-text>
            <tm-money style="font-weight: bold;" :showCn="false" fontSize="48" preFontSize="24"
                :digit="1" :modelValue="1568.398"></tm-money>
        </tm-sheet>

        <tm-sheet>
            <tm-text>自定义货币符号</tm-text>
            <tm-money symbolText="$" fontSize="40" :modelValue="1568" preFontSize="24"></tm-money>
            <tm-money symbolText=" / 美元" fontSize="40" preFontSize="24" symbolPosition='right'
                :modelValue="1568"></tm-money>
            <tm-money symbolText=" 元/个" fontSize="40" preFontSize="24" symbolPosition='right'
                :modelValue="1568"></tm-money>
            <tm-money symbolText="人民币: " fontSize="40" preFontSize="24" symbolPosition='left'
                :modelValue="1568"></tm-money>
        </tm-sheet>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const money = ref(1568.3984)
</script>
<style lang="scss" scoped></style>

🌶️ 兼容性

平台兼容

H5	uniAPP	小程序	version
☑️	☑️	☑️	☑️

🌱 参数

参数名	类型	默认值	描述
digit	number	2	小数点后几位
thousand	boolean	false	开启千分位
thousandUnit	string	","	千分位的分隔符
thousandLen	number	3	千分位的长度，默认是3位一位，如果为4就是万分位依此类推
symbolText	string	'￥'	货币符号
symbolPosition	string	'left'	货币符号位置left:左侧right:右侧
color	string	'primary'	文字颜色
darkColor	string	''	暗黑时的文字颜色
fontSize	string	'32'	文字大小
preFontSize	string	'32'	货币符号及小数字号大小
showCn	boolean	false	是否显示中文金额

🌹 事件

事件名	参数	返回数据	描述

🌽 slot插槽

插槽名	数据	描述
default	名称：binding,inter 类型：string
名称：binding,digit 类型：string
名称：binding,cn 类型：string
名称：binding,lineHeight 类型：string
默认插槽

🥗 ref方法

方法名	参数	返回值	描述