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货币格式化输入框

使用方法

安装

如果您想使用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



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部