Amount 金融数字 | uView Next - 企业级、高质量、更贴近业务场景的 uniapp ui框架

# Amount 金融数字

本组件一个专门用于展示金额、价格等金融数字的组件，支持多种格式化选项、动画效果和中文大写转换。

# 平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

# 基础用法

<template>
  <u-amount :value="1234.56" />
</template>
✅ Copy success!

# 动画效果

<template>
  <u-amount :value="amount" :transition="true" :duration="2000" />
</template>

<script>
export default {
  data() {
    return {
      amount: 0
    }
  },
  mounted() {
    // 延迟设置值，触发动画
    setTimeout(() => {
      this.amount = 123456.78
    }, 1000)
  }
}
</script>
✅ Copy success!

# 分隔符

<template>
  <view>
    <!-- 万分位分隔符 -->
    <u-amount :value="123456.78" :show-separator="true" />
    
    <!-- 千分位分隔符 -->
    <u-amount :value="123456.78" :show-separator="true" :separator-digits="3" />
  </view>
</template>
✅ Copy success!

# 样式定制

<template>
  <u-amount 
    :value="123456.78"
    font-size="60rpx"
    font-size-ratio="0.6"
    color="#ff6b35"
  />
</template>
✅ Copy success!

# 金融符号

<template>
  <view>
    <!-- 前置符号 -->
    <u-amount :value="123456.78" symbol="$" />
    
    <!-- 后置符号 -->
    <u-amount :value="123456.78" symbol="USD" :reverse="true" />
  </view>
</template>
✅ Copy success!

# 中文大写

<template>
  <u-amount :value="123456.78" :capital="true" />
  <!-- 输出：壹拾贰万叁仟肆佰伍拾陆元柒角捌分 -->
</template>
✅ Copy success!

# 插槽使用

<template>
  <u-amount :value="123456.78" :show-separator="true">
    <template #default="{integer, decimal, capital}">
      <text class="custom-integer">{{ integer }}</text>
      <text class="custom-decimal">.{{ decimal }}</text>
    </template>
  </u-amount>
</template>
✅ Copy success!

# API

# Props

参数	说明	类型	默认值
value	金额数值	Number	0
symbol	金融符号	String	'￥'
reverse	是否置后金额符号位置	Boolean	false
precision	数字精度，小数点后保留几位	Number	2
roundUp	数字精度取舍是否四舍五入	Boolean	true
transition	数字变化是否使用动画	Boolean	false
duration	数字变化动画时长	Number	1000
separatorDigits	分隔符位置 (3为千分位，4为万分位)	Number	4
separator	分隔符	String	','
showSymbol	是否显示金融符号	Boolean	true
showDecimal	是否显示小数	Boolean	true
showSeparator	是否显示分隔符	Boolean	false
capital	数字是否转换为大写中文	Boolean	false
fontSize	整数字体大小	String	''
fontSizeRatio	金融符号小数与整数的比例或字体大小	String/Number	0.7
color	颜色，支持使用主题色	String	''
customStyle	自定义样式	Object	{}

# Slots

名称	说明	参数
default	自定义内容	{ integer: string, decimal: string, capital: string }

← AreaPicker 地区选择器 Waterfall 瀑布流 →