Vue Currency Input | 一款基于vuejs的货币格式化输入框组件

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分隔符等。

github网址：https://github.com/dm4t2/vue-currency-input