Vue Currency Input是一款基于vuejs的货币格式化输入框组件。它基于 Vue Composition API 构建，可以为任何输入组件添加货币格式化功能。
Vue Currency Input组件基于 ECMAScript 国际化 API（Intl.NumberFormat）构建。它的特点有：
- 可以将您喜欢的框架（例如 Vuetify、Quasar 或 Element Plus）的输入组件变成货币输入字段。
- 支持 Vue 2 和 Vue 3。
- 基于标准构建: 通过使用 Intl.NumberFormat 确保正确的区域依赖格式化。
- 隐藏格式化，使输入不显眼。
- 内置值范围验证。
使用方法
安装
如果您想使用Vue Currency Input，首先您需要安装它，命令如下：
npm install vue-currency-input
使用
下面是一个简单的使用示例：
<template>
<input
ref="inputRef"
type="text"
/>
</template>
import { useCurrencyInput } from 'vue-currency-input'
export default {
name: 'CurrencyInput',
props: {
modelValue: Number, // Vue 2: value
options: Object
},
setup(props) {
const { inputRef } = useCurrencyInput(props.options)
return { inputRef }
}
}
配置参数
currency: 用于指定货币类型，需要使用 ISO 4217 货币编码进行指定，例如 "USD" 表示美元，"EUR" 表示欧元等。ISO 4217 是一种标准化的货币编码规范，用于表示各种货币类型。locale: 用于指定本地化语言，需要使用 BCP 47 语言标签进行指定，例如 "en" 表示英语，"de-DE" 表示德语等。BCP 47 是一种标准化的语言标签规范，用于表示各种语言和地区。如果未指定 locale，则会使用浏览器的默认本地化设置。currencyDisplay: 用于指定货币格式化时如何显示货币符号。可以使用以下值进行指定：- "symbol"：使用本地化的货币符号，例如 "€"。
- "narrowSymbol"：使用窄格式的货币符号，例如 "$100"而不是"US$100"。
- "code"：使用 ISO 货币编码进行显示。
- "name"：使用本地化的货币名称进行显示，例如 "dollar"。
- "hidden"：隐藏货币符号。
accountingSign: 用于指定是否使用会计符号格式化，即将负数用括号包裹起来，而不是在前面加上负号。会计符号格式化是一种常见的货币格式化方式，用于在负数值前面加上一对括号，以表示负数。autoDecimalDigits: 用于指定是否自动插入小数点符号，使用最后输入的数字作为小数位。默认情况下，这个选项为 false，需要手动插入小数点符号。如果启用了这个选项，当用户在输入框中输入数字时，会自动在合适的位置插入小数点符号，以形成正确的货币格式。precision: 用于指定显示的小数位数。默认情况下，这个选项为undefined，会使用货币的默认值。对于整数值，小数位将被隐藏。这个选项的值必须介于 0 和 15 之间，并且只适用于支持小数位的货币。您还可以传递一个对象{min, max}，以使用精度范围。hideCurrencySymbolOnFocus: 用于指定是否在输入框获得焦点时隐藏货币符号。默认情况下，这个选项为true。如果启用了这个选项，当用户点击输入框并开始输入数字时，货币符号将被隐藏，以便更好地显示输入的数字。hideGroupingSeparatorOnFocus: 用于指定是否在输入框获得焦点时隐藏分组分隔符。默认情况下，这个选项为true。如果启用了这个选项，当用户点击输入框并开始输入数字时，分组分隔符将被隐藏，以便更好地显示输入的数字。hideNegligibleDecimalDigitsOnFocus: 用于指定是否在输入框获得焦点时隐藏不重要的小数位。默认情况下，这个选项为true。如果启用了这个选项，当用户点击输入框并开始输入数字时，不重要的小数位将被隐藏，以便更好地显示输入的数字。: 用于应用一个缩放到导出的值上。可能的值包括：- "precision"，用于自动将浮点值缩放为整数，具体取决于当前的精度，例如 1.23 -> 123。
- "thousands"，使用缩放因子 1,000。
- "millions"，使用缩放因子 1,000,000。
- "billions"，使用缩放因子 1,000,000,000。
valueRange: 用于指定接受的值的范围，格式为对象{min, max}。默认情况下，这个选项为 undefined，即没有值范围限制。当输入框失去焦点时，将触发验证，并自动设置相应的阈值，如果超出了范围。useGrouping: 用于指定是否使用分组分隔符，例如千位分隔符、Lakh分隔符、Crore分隔符等。
