更新记录

1.0.0（2026-09-15） 下载此版本

初版

平台兼容性

uni-app

其他

SL-WX-Amount 金额大写转换组件

组件简介

将数字金额自动转换为人民币大写（中文大写数字）的展示组件。支持整数、小数（角/分）、负数，内置完整的零值处理规则（连续零合并、节间零补位）。H5 / 微信小程序通用。

设计说明：组件默认渲染「前缀 + 大写金额」文本，同时通过 default 插槽暴露 amount、upper、prefix 三个作用域参数，业务侧可自由排版（如财务票据、合同模板等场景）。

目录结构

components/SL-WX-Amount
└── SL-WX-Amount.vue

核心特性

• 完整人民币大写转换：支持 零壹贰叁肆伍陆柒捌玖 + 拾佰仟万亿 单位体系。
• 小数处理：自动拆分角/分，无小数时追加"整"字。
• 负数支持：负数前自动加"负"字前缀。
• 零值规则：正确处理连续零合并（如 1000001 → 壹佰万零壹元整）、节间零补位（如 10001000 → 壹仟万零壹万元整）。
• 插槽自定义：default 插槽透传 amount（数值）、upper（大写字符串）、prefix（前缀），可完全自定义布局。
• 样式可配置：color / fontSize 控制大写文本样式，showPrefix 控制是否显示前缀。

Props

Slots

Methods

// 在父组件中调用
this.$refs.amountRef.convert(12345.67) // => '壹万贰仟叁佰肆拾伍元陆角柒分'

转换规则说明

基本单位

小数规则

零值处理规则

使用示例

示例 1：基础用法

<template>
  <sl-wx-amount :amount="12345.67" />
  <!-- 渲染：人民币 壹万贰叁佰肆拾伍元陆角柒分 -->
</template>

<script>
import SlWxAmount from '@/components/SL-WX-Amount/SL-WX-Amount.vue'

export default {
  components: { SlWxAmount }
}
</script>

示例 2：隐藏前缀 + 自定义颜色

<sl-wx-amount :amount="100000" :show-prefix="false" color="#c0392b" :font-size="40" />
<!-- 渲染：壹拾万元整 （红色、40rpx） -->

示例 3：插槽自定义（财务票据样式）

<sl-wx-amount :amount="amount" :show-prefix="false">
  <template v-slot:default="{ upper }">
    <view class="invoice-amount">
      <text class="invoice-label">金额大写</text>
      <text class="invoice-value">{{ upper }}</text>
      <text class="invoice-num">¥ {{ amount.toFixed(2) }}</text>
    </view>
  </template>
</sl-wx-amount>

示例 4：调用 convert 方法

<sl-wx-amount ref="amountRef" :amount="0" :show-prefix="false" />

<script>
export default {
  methods: {
    getUpper() {
      return this.$refs.amountRef.convert(99999999.99)
      // => '玖仟玖佰玖拾玖万玖玖佰玖拾玖元玖角玖分'
    }
  }
}
</script>

注意事项

1. 精度限制：内部使用 Math.round(amount * 100) 处理小数，适用于两位小数的金额场景。超过两位小数的值会被四舍五入到分。

2. 极大数值：支持到"万亿"级别（SEC_UNITS = ['', '万', '亿', '万亿']）。超过万亿的数值，万亿以上部分不再追加单位，但数字仍正确转换。

3. 非法输入：传入 NaN、null、undefined 时返回空字符串 ''。

4. 字符串输入：amount 支持字符串类型（如 '12345.67'），内部自动 parseFloat 转换。