CN116795359A - 基于vue的金额组件实现方法及系统 - Google Patents

Abstract

本发明提供了一种基于vue的金额组件实现方法及系统，包括：步骤S1：基于vue框架封装格式化金额组件，设置参数以及对应参数的处理方法；步骤S2：在金额组件中封装方法函数；步骤S3：将封装好的金额组件进行注册，引入金额组件至功能模块，配置传递的属性参数；步骤S4：配置属性参数后，在金额组件中输入金额，实现金额的定制化转换。本发明实现了对金额的多种操作，使之格式化规范化；本发明实现了区分输入金额的币种符号以及不同币种的金额展示形式；本发明实现了金额的位数校验；本发明实现了数字金额和大写人民币汉字的转换。

Description

基于vue的金额组件实现方法及系统

技术领域

本发明涉及金融领域，具体地，涉及一种基于vue的金额组件实现方法及系统。

背景技术

银行项目中有很多需要对金额进行不同操作和转换的功能，然而现在很多通用组件库并没有规范化多功能的金额组件。比如针对不同币种金额情况和展示金额大写汉字情况，需要开发大量代码进行转换，所以会造成代码易出缺陷，复用性较低，缺少通用性问题，大大增加了开发时间，开发效率较低。

专利文献CN110378784A(申请号：CN201910670740.9)公开了一种金额输入方法及装置，金额输入方法包括：接收用户的汉字输入金额；根据所述汉字输入金额及预设的汉字数字映射关系，生成所述汉字输入金额所对应的数字金额。但该发明不能区分输入金额的币种符号以及不同币种的金额展示形式。

发明内容

针对现有技术中的缺陷，本发明的目的是提供一种基于vue的金额组件实现方法及系统。

根据本发明提供的一种基于vue的金额组件实现方法，包括：

步骤S1：基于vue框架封装格式化金额组件，设置参数以及对应参数的处理方法；

步骤S2：在金额组件中封装方法函数；

步骤S3：将封装好的金额组件进行注册，引入金额组件至功能模块，配置传递的属性参数；

步骤S4：配置属性参数后，在金额组件中输入金额，实现金额的定制化转换。

优选地，在所述步骤S1中：

步骤S1.1：新建一个vue文件，在文件中写一个input输入框，设置需要父组件传递的props参数，参数thousand表示千分位分隔，参数radixPoint属性表示标准化小数点的位数，参数currency表示币种，参数zh表示汉化后的金额文字；

步骤S1.2：在组件中通过自定义的属性参数编写对应不同的函数方法，其中千分位分隔用自定义函数thousandSplit()实现，标准化小数点的位数用自定义函数toRadixPoint()实现，转换币种用自定义函数convertCurrency()实现，展示金额大写汉字通过自定义函数convertChinese()实现。

优选地，在所述步骤S2中：

步骤S2.1：自定义函数thousandSplit()内部通过正则表达式实现，将输入金额进行千分位逗号分隔，按照小数点将数字分为整数和小数两部分，对整数部分进行逗号分隔，并使用正则表达式，通过join方法将整数和小数部分合并，实现输入金额的千分位分隔；

步骤S2.2：自定义函数convertCurrency()使用数据类型BigInt，通过BigInt.prototype.toLocaleString()实现，根据组件传递参数currency决定金额的币种,通过locales和options自定义函数行为，实现金额的币种符号和不同币种的金额展示形式；

步骤S2.3：自定义函数toRadixPoint()通过正则表达式实现，精确金额的小数位，对输入金额的小数点位数进行校验；

步骤S2.4：自定义函数convertChinese()在方法中列出大写人民币的所需单位，设置最大处理数和最小处理数，进行参数情况处理，将整数单位和小数单位进行拼接整合，显示金额的大写汉字。

优选地，在所述步骤S3中：

步骤S3.1：import引入金额组件，找到金额组件相对文件的相对路径，为引入金额组件起名，在Components对象里进行注册，在指定页面里的template引用金额组件；

步骤S3.2：在金额组件中通过v-bind绑定传递给金额组件的参数属性，通过v-model双向数据绑定输入的金额，实现数据的实时响应。

优选地，在所述步骤S4中：

在金额输入完成后，根据组件绑定的参数，thousand将金额格式化为千分位分隔，radixPoint将金额标准化为需要的小数点位数，currency来展示该金额的币种,zh将金额展示成大写汉字形式。

根据本发明提供的一种基于vue的金额组件实现系统，包括：

模块M1：基于vue框架封装格式化金额组件，设置参数以及对应参数的处理方法；

模块M2：在金额组件中封装方法函数；

模块M3：将封装好的金额组件进行注册，引入金额组件至功能模块，配置传递的属性参数；

模块M4：配置属性参数后，在金额组件中输入金额，实现金额的定制化转换。

优选地，在所述模块M1中：

模块M1.1：新建一个vue文件，在文件中写一个input输入框，设置需要父组件传递的props参数，参数thousand表示千分位分隔，参数radixPoint属性表示标准化小数点的位数，参数currency表示币种，参数zh表示汉化后的金额文字；

模块M1.2：在组件中通过自定义的属性参数编写对应不同的函数方法，其中千分位分隔用自定义函数thousandSplit()实现，标准化小数点的位数用自定义函数toRadixPoint()实现，转换币种用自定义函数convertCurrency()实现，展示金额大写汉字通过自定义函数convertChinese()实现。

优选地，在所述模块M2中：

模块M2.1：自定义函数thousandSplit()内部通过正则表达式实现，将输入金额进行千分位逗号分隔，按照小数点将数字分为整数和小数两部分，对整数部分进行逗号分隔，并使用正则表达式，通过join方法将整数和小数部分合并，实现输入金额的千分位分隔；

模块M2.2：自定义函数convertCurrency()使用数据类型BigInt，通过BigInt.prototype.toLocaleString()实现，根据组件传递参数currency决定金额的币种,通过locales和options自定义函数行为，实现金额的币种符号和不同币种的金额展示形式；

模块M2.3：自定义函数toRadixPoint()通过正则表达式实现，精确金额的小数位，对输入金额的小数点位数进行校验；

模块M2.4：自定义函数convertChinese()在方法中列出大写人民币的所需单位，设置最大处理数和最小处理数，进行参数情况处理，将整数单位和小数单位进行拼接整合，显示金额的大写汉字。

优选地，在所述模块M3中：

模块M3.1：import引入金额组件，找到金额组件相对文件的相对路径，为引入金额组件起名，在Components对象里进行注册，在指定页面里的template引用金额组件；

模块M3.2：在金额组件中通过v-bind绑定传递给金额组件的参数属性，通过v-model双向数据绑定输入的金额，实现数据的实时响应。

优选地，在所述模块M4中：

在金额输入完成后，根据组件绑定的参数，thousand将金额格式化为千分位分隔，radixPoint将金额标准化为需要的小数点位数，currency来展示该金额的币种,zh将金额展示成大写汉字形式。

与现有技术相比，本发明具有如下的有益效果：

1、本发明可以对输入的金额进行多种操作来实现金额的规范化和格式化，比如千分位分隔，区分多币种，像人民币￥，欧元EUR等,控制小数位，针对中国人的习惯，可以展示金额对应的汉字；

2、本发明实现了区分输入金额的币种符号以及不同币种的金额展示形式；

3、本发明实现了金额的位数校验；

4、本发明实现了数字金额和大写人民币汉字的转换。

5、本发明根据当前功能需求向组件传递对应需要的参数，目前这个组件基本可以满足银行中各种项目场景的需要；

6、本发明减少开发时间，复用性高，大大增加开发效率，且操作简单，能提高办公效率，保证了输入金额的准确性和规范。

附图说明

通过阅读参照以下附图对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显：

图1为本发明流程图。

具体实施方式

下面结合具体实施例对本发明进行详细说明。以下实施例将有助于本领域的技术人员进一步理解本发明，但不以任何形式限制本发明。应当指出的是，对本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变化和改进。这些都属于本发明的保护范围。

实施例1：

该金额组件通过采用了父子组件互相传值的方式，父组件通过v-bind将参数传递给子组件，子组件通过props接收父组件传递的参数，并在子组件封装函数方法，从而实现了对金额的多种操作，使之格式化规范化。

该金额组件通过采用了新型数据类型BigInt，它的toLocaleString()方法，通过options和locales自定义函数行为，从而实现了区分输入金额的币种符号以及不同币种的金额展示形式。

该金额组件通过采用正则表达式进行金额校验，精确到两位小数，通过正则表达式newRegExp(^[0-9]+(.[0-9]{2})？$)对输入金额的小数点位数进行校验，从而实现了金额的位数校验。

该金额组件通过自定义封装函数方法convertChinese(),在该方法中需要列出大写人民币的所需单位，设置最大处理数和最小处理数，还需要进行一些参数情况处理，比如参数为字符串，有无小数等，从而实现了数字金额和大写人民币汉字的转换。

根据本发明提供的一种基于vue的金额组件实现方法，如图1所示，包括：

步骤S1：基于vue框架封装格式化金额组件，设置参数以及对应参数的处理方法；

具体地，在所述步骤S1中：

步骤S1.1：新建一个vue文件，在文件中写一个input输入框，设置需要父组件传递的props参数，参数thousand表示千分位分隔，参数radixPoint属性表示标准化小数点的位数，参数currency表示币种，参数zh表示汉化后的金额文字；

步骤S1.2：在组件中通过自定义的属性参数编写对应不同的函数方法，其中千分位分隔用自定义函数thousandSplit()实现，标准化小数点的位数用自定义函数toRadixPoint()实现，转换币种用自定义函数convertCurrency()实现，展示金额大写汉字通过自定义函数convertChinese()实现。

步骤S2：在金额组件中封装方法函数；

具体地，在所述步骤S2中：

步骤S2.1：自定义函数thousandSplit()内部通过正则表达式实现，将输入金额进行千分位逗号分隔，按照小数点将数字分为整数和小数两部分，对整数部分进行逗号分隔，并使用正则表达式，通过join方法将整数和小数部分合并，实现输入金额的千分位分隔；

步骤S2.2：自定义函数convertCurrency()使用数据类型BigInt，通过BigInt.prototype.toLocaleString()实现，根据组件传递参数currency决定金额的币种,通过locales和options自定义函数行为，实现金额的币种符号和不同币种的金额展示形式；

步骤S2.3：自定义函数toRadixPoint()通过正则表达式实现，精确金额的小数位，对输入金额的小数点位数进行校验；

步骤S2.4：自定义函数convertChinese()在方法中列出大写人民币的所需单位，设置最大处理数和最小处理数，进行参数情况处理，将整数单位和小数单位进行拼接整合，显示金额的大写汉字。

步骤S3：将封装好的金额组件进行注册，引入金额组件至功能模块，配置传递的属性参数；

具体地，在所述步骤S3中：

步骤S3.1：import引入金额组件，找到金额组件相对文件的相对路径，为引入金额组件起名，在Components对象里进行注册，在指定页面里的template引用金额组件；

步骤S3.2：在金额组件中通过v-bind绑定传递给金额组件的参数属性，通过v-model双向数据绑定输入的金额，实现数据的实时响应。

步骤S4：配置属性参数后，在金额组件中输入金额，实现金额的定制化转换。

具体地，在所述步骤S4中：

在金额输入完成后，根据组件绑定的参数，thousand将金额格式化为千分位分隔，radixPoint将金额标准化为需要的小数点位数，currency来展示该金额的币种,zh将金额展示成大写汉字形式。

实施例2：

实施例2为实施例1的优选例，以更为具体地对本发明进行说明。

本发明还提供一种基于vue的金额组件实现系统，所述基于vue的金额组件实现系统可以通过执行所述基于vue的金额组件实现方法的流程步骤予以实现，即本领域技术人员可以将所述基于vue的金额组件实现方法理解为所述基于vue的金额组件实现系统的优选实施方式。

根据本发明提供的一种基于vue的金额组件实现系统，包括：

模块M1：基于vue框架封装格式化金额组件，设置参数以及对应参数的处理方法；

具体地，在所述模块M1中：

模块M1.1：新建一个vue文件，在文件中写一个input输入框，设置需要父组件传递的props参数，参数thousand表示千分位分隔，参数radixPoint属性表示标准化小数点的位数，参数currency表示币种，参数zh表示汉化后的金额文字；

模块M1.2：在组件中通过自定义的属性参数编写对应不同的函数方法，其中千分位分隔用自定义函数thousandSplit()实现，标准化小数点的位数用自定义函数toRadixPoint()实现，转换币种用自定义函数convertCurrency()实现，展示金额大写汉字通过自定义函数convertChinese()实现。

模块M2：在金额组件中封装方法函数；

具体地，在所述模块M2中：

模块M2.1：自定义函数thousandSplit()内部通过正则表达式实现，将输入金额进行千分位逗号分隔，按照小数点将数字分为整数和小数两部分，对整数部分进行逗号分隔，并使用正则表达式，通过join方法将整数和小数部分合并，实现输入金额的千分位分隔；

模块M2.2：自定义函数convertCurrency()使用数据类型BigInt，通过BigInt.prototype.toLocaleString()实现，根据组件传递参数currency决定金额的币种,通过locales和options自定义函数行为，实现金额的币种符号和不同币种的金额展示形式；

模块M2.3：自定义函数toRadixPoint()通过正则表达式实现，精确金额的小数位，对输入金额的小数点位数进行校验；

模块M2.4：自定义函数convertChinese()在方法中列出大写人民币的所需单位，设置最大处理数和最小处理数，进行参数情况处理，将整数单位和小数单位进行拼接整合，显示金额的大写汉字。

模块M3：将封装好的金额组件进行注册，引入金额组件至功能模块，配置传递的属性参数；

具体地，在所述模块M3中：

模块M3.1：import引入金额组件，找到金额组件相对文件的相对路径，为引入金额组件起名，在Components对象里进行注册，在指定页面里的template引用金额组件；

模块M3.2：在金额组件中通过v-bind绑定传递给金额组件的参数属性，通过v-model双向数据绑定输入的金额，实现数据的实时响应。

模块M4：配置属性参数后，在金额组件中输入金额，实现金额的定制化转换。

具体地，在所述模块M4中：

在金额输入完成后，根据组件绑定的参数，thousand将金额格式化为千分位分隔，radixPoint将金额标准化为需要的小数点位数，currency来展示该金额的币种,zh将金额展示成大写汉字形式。

实施例3：

实施例3为实施例1的优选例，以更为具体地对本发明进行说明。

步骤1：基于vue框架封装格式化金额组件，设置需要传递的参数，以及对应参数的处理方法。

步骤2：在该组件中封装方法函数，其中包括千分位分隔函数，转换金额币种函数，标准化金额小数点函数，转换大写人民币汉字函数等。

步骤3：将封装好的金额组件在指定页面或者全局组件注册，import引入该组件到需要的功能模块，根据业务需求配置需要传递的参数属性。

步骤4：配置好属性参数后，在没有报错的情况下，根据需求，在金额组件中输入金额，实现金额的定制化转换。

所述步骤1包括如下步骤：

步骤1.1：新建一个vue文件，在文件中写一个input输入框，设置好需要父组件传递的props参数，例如，参数thousand表示千分位分隔，参数radixPoint属性表示标准化小数点的位数，参数currency表示币种，参数zh表示汉化后的金额文字。

步骤1.2：在组件中通过刚才自定义的属性参数来编写对应不同的函数方法，其中千分位分隔用自定义函数thousandSplit()实现，标准化小数点的位数用自定义函数toRadixPoint()实现，转换币种用自定义函数convertCurrency()实现，展示金额大写汉字通过自定义函数convertChinese()实现。

所述步骤2包括如下步骤：

步骤2.1：其中自定义函数thousandSplit()内部通过正则表达式来实现，通过采用正则表达式，将输入金额做一个千分位逗号分隔，首先需要先按照小数点将数字分为整数和小数两部分，因为金额的小数点是两位，所以我们只需要对整数部分进行逗号分隔，并使用正则表达式new RegExp(‘/\B(？＝(\d{3}+(？！\d))/g’)，最后通过join方法将整数和小数部分合并进来，从而实现了输入金额的千分位分隔。

步骤2.2：自定义函数convertCurrency()里使用了新型数据类型BigInt,主要通过BigInt.prototype.toLocaleString()来实现，根据组件传递参数currency来决定该金额的币种,通过locales和options自定义函数行为，实现了金额的币种符号和不同币种的金额展示形式。

步骤2.3：自定义函数toRadixPoint()里通过正则表达式来实现，使用正则表达式newRegExp(^[0-9]+(.[0-9]{2})？$)，精确金额的小数位，对输入金额的小数点位数进行校验。

步骤2.4：自定义函数convertChinese()需要在方法中列出大写人民币的所需单位，设置最大处理数和最小处理数，还需要进行一些参数情况处理，比如参数为字符串，有无小数等，最后将整数单位和小数单位进行拼接整合，显示金额的大写汉字。

所述步骤3包括如下步骤：

步骤3.1：首先需要import引入该金额组件，需要找到该组件相对该文件的相对路径，并且为引入组件起个别名，在Components对象里进行注册，之后在指定页面里的<template>引用该组件。

步骤3.2：根据需求，在组件中通过v-bind绑定需要传递给金额组件的参数属性比如thousand,radixPoint,currency,zh，通过v-model双向数据绑定输入的金额，实现数据的实时响应。

步骤4.1：在金额输入完成后，组件失去焦点时，就会根据组件绑定的参数，比如thousand将金额格式化为千分位分隔，radixPoint将金额标准化为需要的小数点位数，currency来展示该金额的币种,zh将金额展示成大写汉字形式，来进行金额的操作实现金额的格式化和规范化。

本领域技术人员知道，除了以纯计算机可读程序代码方式实现本发明提供的系统、装置及其各个模块以外，完全可以通过将方法步骤进行逻辑编程来使得本发明提供的系统、装置及其各个模块以逻辑门、开关、专用集成电路、可编程逻辑控制器以及嵌入式微控制器等的形式来实现相同程序。所以，本发明提供的系统、装置及其各个模块可以被认为是一种硬件部件，而对其内包括的用于实现各种程序的模块也可以视为硬件部件内的结构；也可以将用于实现各种功能的模块视为既可以是实现方法的软件程序又可以是硬件部件内的结构。

以上对本发明的具体实施例进行了描述。需要理解的是，本发明并不局限于上述特定实施方式，本领域技术人员可以在权利要求的范围内做出各种变化或修改，这并不影响本发明的实质内容。在不冲突的情况下，本申请的实施例和实施例中的特征可以任意相互组合。

Claims (10)

1.一种基于vue的金额组件实现方法，其特征在于，包括：

步骤S1：基于vue框架封装格式化金额组件，设置参数以及对应参数的处理方法；

步骤S2：在金额组件中封装方法函数；

步骤S3：将封装好的金额组件进行注册，引入金额组件至功能模块，配置传递的属性参数；

步骤S4：配置属性参数后，在金额组件中输入金额，实现金额的定制化转换。

2.根据权利要求1所述的基于vue的金额组件实现方法，其特征在于，在所述步骤S1中：

步骤S1.1：新建一个vue文件，在文件中写一个input输入框，设置需要父组件传递的props参数，参数thousand表示千分位分隔，参数radixPoint属性表示标准化小数点的位数，参数currency表示币种，参数zh表示汉化后的金额文字；

步骤S1.2：在组件中通过自定义的属性参数编写对应不同的函数方法，其中千分位分隔用自定义函数thousandSplit()实现，标准化小数点的位数用自定义函数toRadixPoint()实现，转换币种用自定义函数convertCurrency()实现，展示金额大写汉字通过自定义函数convertChinese()实现。

3.根据权利要求1所述的基于vue的金额组件实现方法，其特征在于，在所述步骤S2中：

步骤S2.1：自定义函数thousandSplit()内部通过正则表达式实现，将输入金额进行千分位逗号分隔，按照小数点将数字分为整数和小数两部分，对整数部分进行逗号分隔，并使用正则表达式，通过join方法将整数和小数部分合并，实现输入金额的千分位分隔；

步骤S2.2：自定义函数convertCurrency()使用数据类型BigInt，通过BigInt.prototype.toLocaleString()实现，根据组件传递参数currency决定金额的币种,通过locales和options自定义函数行为，实现金额的币种符号和不同币种的金额展示形式；

步骤S2.3：自定义函数toRadixPoint()通过正则表达式实现，精确金额的小数位，对输入金额的小数点位数进行校验；

步骤S2.4：自定义函数convertChinese()在方法中列出大写人民币的所需单位，设置最大处理数和最小处理数，进行参数情况处理，将整数单位和小数单位进行拼接整合，显示金额的大写汉字。

4.根据权利要求1所述的基于vue的金额组件实现方法，其特征在于，在所述步骤S3中：

步骤S3.1：import引入金额组件，找到金额组件相对文件的相对路径，为引入金额组件起名，在Components对象里进行注册，在指定页面里的template引用金额组件；

步骤S3.2：在金额组件中通过v-bind绑定传递给金额组件的参数属性，通过v-model双向数据绑定输入的金额，实现数据的实时响应。

5.根据权利要求1所述的基于vue的金额组件实现方法，其特征在于，在所述步骤S4中：

在金额输入完成后，根据组件绑定的参数，thousand将金额格式化为千分位分隔，radixPoint将金额标准化为需要的小数点位数，currency来展示该金额的币种,zh将金额展示成大写汉字形式。

6.一种基于vue的金额组件实现系统，其特征在于，包括：

模块M1：基于vue框架封装格式化金额组件，设置参数以及对应参数的处理方法；

模块M2：在金额组件中封装方法函数；

模块M3：将封装好的金额组件进行注册，引入金额组件至功能模块，配置传递的属性参数；

模块M4：配置属性参数后，在金额组件中输入金额，实现金额的定制化转换。

7.根据权利要求6所述的基于vue的金额组件实现系统，其特征在于，在所述模块M1中：

模块M1.1：新建一个vue文件，在文件中写一个input输入框，设置需要父组件传递的props参数，参数thousand表示千分位分隔，参数radixPoint属性表示标准化小数点的位数，参数currency表示币种，参数zh表示汉化后的金额文字；

模块M1.2：在组件中通过自定义的属性参数编写对应不同的函数方法，其中千分位分隔用自定义函数thousandSplit()实现，标准化小数点的位数用自定义函数toRadixPoint()实现，转换币种用自定义函数convertCurrency()实现，展示金额大写汉字通过自定义函数convertChinese()实现。

8.根据权利要求6所述的基于vue的金额组件实现系统，其特征在于，在所述模块M2中：

模块M2.1：自定义函数thousandSplit()内部通过正则表达式实现，将输入金额进行千分位逗号分隔，按照小数点将数字分为整数和小数两部分，对整数部分进行逗号分隔，并使用正则表达式，通过join方法将整数和小数部分合并，实现输入金额的千分位分隔；

模块M2.2：自定义函数convertCurrency()使用数据类型BigInt，通过BigInt.prototype.toLocaleString()实现，根据组件传递参数currency决定金额的币种,通过locales和options自定义函数行为，实现金额的币种符号和不同币种的金额展示形式；

模块M2.3：自定义函数toRadixPoint()通过正则表达式实现，精确金额的小数位，对输入金额的小数点位数进行校验；

模块M2.4：自定义函数convertChinese()在方法中列出大写人民币的所需单位，设置最大处理数和最小处理数，进行参数情况处理，将整数单位和小数单位进行拼接整合，显示金额的大写汉字。

9.根据权利要求6所述的基于vue的金额组件实现系统，其特征在于，在所述模块M3中：

模块M3.1：import引入金额组件，找到金额组件相对文件的相对路径，为引入金额组件起名，在Components对象里进行注册，在指定页面里的template引用金额组件；

模块M3.2：在金额组件中通过v-bind绑定传递给金额组件的参数属性，通过v-model双向数据绑定输入的金额，实现数据的实时响应。

10.根据权利要求6所述的基于vue的金额组件实现系统，其特征在于，在所述模块M4中：

在金额输入完成后，根据组件绑定的参数，thousand将金额格式化为千分位分隔，radixPoint将金额标准化为需要的小数点位数，currency来展示该金额的币种,zh将金额展示成大写汉字形式。