【技术实现步骤摘要】
基于vue的金额组件实现方法及系统
[0001]本专利技术涉及金融领域，具体地，涉及一种基于vue的金额组件实现方法及系统。
技术介绍
[0002]银行项目中有很多需要对金额进行不同操作和转换的功能，然而现在很多通用组件库并没有规范化多功能的金额组件。比如针对不同币种金额情况和展示金额大写汉字情况，需要开发大量代码进行转换，所以会造成代码易出缺陷，复用性较低，缺少通用性问题，大大增加了开发时间，开发效率较低。
[0003]专利文献CN110378784A(申请号：CN201910670740.9)公开了一种金额输入方法及装置，金额输入方法包括：接收用户的汉字输入金额；根据所述汉字输入金额及预设的汉字数字映射关系，生成所述汉字输入金额所对应的数字金额。但该专利技术不能区分输入金额的币种符号以及不同币种的金额展示形式。
技术实现思路
[0004]针对现有技术中的缺陷，本专利技术的目的是提供一种基于vue的金额组件实现方法及系统。
[0005]根据本专利技术提供的一种基于vue的金额组件实现方法，包...
【技术保护点】
【技术特征摘要】
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.一种基于v...
【专利技术属性】
技术研发人员：孙雨欣，叶黎明，徐小斌，胡佳磊，廖子宇，刘东旭，马蓉蓉，
申请(专利权)人：兴业数字金融服务上海股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。