金额输入组件

概述

MoneyInput 是一个专门用于金额输入的组件，支持货币符号、千分位分隔符、大写金额显示等功能。

组件路径：web/apps/web-ele/src/components/zq-form/money-input/

组件名称：MoneyInput

功能特性

• 货币符号前缀显示
• 千分位分隔符格式化
• 中文大写金额显示
• 小数精度控制
• 最大/最小值限制
• 输入时自动过滤非数字字符

Props

属性	类型	默认值	说明
modelValue	number | string	-	金额值
precision	number	2	小数精度
currencySymbol	string	'¥'	货币符号
showCurrency	boolean	true	是否显示货币符号
showThousandSeparator	boolean	true	是否显示千分位分隔符
showCapital	boolean	false	是否显示大写金额
min	number	-	最小值
max	number	-	最大值
disabled	boolean	false	是否禁用
readonly	boolean	false	是否只读
placeholder	string	'请输入金额'	占位符

Events

事件	参数	说明
update:modelValue	number | string	值更新
change	number | string	值变化

使用示例

基本用法

<template>
  <MoneyInput v-model="amount" placeholder="请输入金额" />
</template>

<script setup>
import { ref } from 'vue';

const amount = ref(0);
</script>

显示大写金额

<template>
  <MoneyInput
    v-model="amount"
    :show-capital="true"
  />
</template>

<!-- 输入 1234.56 显示：
     ¥ 1,234.56
     壹仟贰佰叁拾肆元伍角陆分
-->

自定义货币符号

<template>
  <MoneyInput
    v-model="amount"
    currency-symbol="$"
    :precision="2"
  />
</template>

设置范围限制

<template>
  <MoneyInput
    v-model="amount"
    :min="0"
    :max="999999.99"
    :precision="2"
  />
</template>

不显示千分位

<template>
  <MoneyInput
    v-model="amount"
    :show-thousand-separator="false"
  />
</template>

与表单设计器集成

在表单设计器中，该组件作为 money-input 类型的表单项使用：

{
  "type": "money-input",
  "field": "amount",
  "label": "金额",
  "props": {
    "precision": 2,
    "currencySymbol": "¥",
    "showCurrency": true,
    "showThousandSeparator": true,
    "showCapital": true,
    "min": 0,
    "placeholder": "请输入金额"
  }
}

大写金额转换规则

组件内置中文大写金额转换，支持：

• 整数部分：零、壹、贰、叁、肆、伍、陆、柒、捌、玖
• 单位：拾、佰、仟、万、亿、兆
• 小数部分：角、分
• 特殊处理：负数、零元整

典型应用场景

• 财务系统：发票金额、报销金额
• 订单系统：订单金额、支付金额
• 合同管理：合同金额
• 工资管理：薪资金额