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

基础用法

<template>
  <un-amount :value="1234.56" />
</template>

动画效果

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

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const amount = ref<number>(0)

onMounted(() => {
  setTimeout(() => {
    amount.value = 123456.78
  }, 1000)
})
</script>

分隔符

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

样式定制

<template>
  <un-amount 
    :value="123456.78"
    size="60rpx"
    symbol-size="40rpx"
    decimal-size="40rpx"
    color="#ff6b35"
  />
</template>

金融符号

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

中文大写

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

插槽使用

<template>
  <un-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>
  </un-amount>
</template>

API

Props

参数	说明	类型	默认值
value	金额数值	number | string	0
modelValue	金额数值（双向绑定）	number | string	0
symbol	金融符号	string	'￥'
reverse	是否置后金额符号位置	Boolean	false
precision	数字精度，小数点后保留几位	number	2
roundUp	数字精度取舍是否四舍五入	Boolean	true
transition	数字变化是否使用动画	Boolean	false
duration	数字变化动画时长	number	1000
separatorDigits	分隔符位置 (3为千分位，4为万分位)	Enum	4
separator	分隔符	string	','
showSymbol	是否显示金融符号	Boolean	true
showDecimal	是否显示小数	Boolean	true
showSeparator	是否显示分隔符	Boolean	false
capital	数字是否转换为大写中文	Boolean	false
size	整数字体大小	string	''
symbolSize	金融符号字体大小	string | number	''
decimalSize	小数部分字体大小	string | number	''
color	颜色，包括符号和小数字体	string	''
symbolColor	金融符号字体颜色	string	''
decimalColor	小数部分字体颜色	string	''

Slots

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

Scss 变量

关于组件 SCSS 变量的用法，请参考 组件 SCSS 变量用法。

变量名	默认值	说明
$un-amount-symbol-color	$text-color	金融符号颜色
$un-amount-symbol-font-weight	$font-normal	金融符号字体粗细
$un-amount-integer-color	$text-color	整数部分颜色
$un-amount-integer-font-weight	$font-bold	整数部分字体粗细
$un-amount-decimal-color	$text-color	小数部分颜色
$un-amount-decimal-font-weight	$font-normal	小数部分字体粗细
$un-amount-capital-color	$text-color	中文大写颜色
$un-amount-capital-font-weight	$font-normal	中文大写字体粗细