uView Next

# 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 }

← LineProgress 线形进度条 →