外观
Amount 金融数字
约 686 字大约 2 分钟
2025-10-31
本组件一个专门用于展示金额、价格等金融数字的组件,支持多种格式化选项、动画效果和中文大写转换。
基础用法
<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 | 中文大写字体粗细 |
