Amount component implementation method and system based on vue
By encapsulating a currency component within the Vue framework and utilizing custom functions and BigInt.prototype.toLocaleString() to format and validate amounts, the problem of displaying currency and uppercase Chinese characters in existing component libraries is solved, improving the development efficiency and accuracy of banking projects.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- IND BANK CO
- Filing Date
- 2022-12-30
- Publication Date
- 2026-08-04
AI Technical Summary
The lack of standardized amount components in existing general component libraries leads to low reusability and efficiency in banking projects, and makes it impossible to effectively distinguish currencies and display amounts in uppercase Chinese characters.
This component encapsulates a formatted amount component based on the Vue framework. It implements thousands separator, currency conversion, and uppercase Chinese characters for the amount through custom functions, and uses BigInt.prototype.toLocaleString() and regular expressions for amount formatting and validation.
It standardizes various operations related to amounts, supports multi-currency display, improves development efficiency and the accuracy of input amounts, and reduces development time.
Smart Images
Figure CN116795359B_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the financial field, specifically to a method and system for implementing a Vue-based amount component. Background Technology
[0002] Banking projects often require various operations and conversions of monetary amounts. However, many general-purpose component libraries lack standardized, multi-functional monetary component libraries. For example, handling different currency amounts and displaying amounts in uppercase Chinese characters requires extensive code development, leading to code defects, low reusability, and a lack of versatility, significantly increasing development time and reducing efficiency.
[0003] Patent document CN110378784A (application number: CN201910670740.9) discloses a method and apparatus for inputting monetary amounts. The method includes: receiving a user's Chinese character input amount; and generating a numerical amount corresponding to the Chinese character input amount based on the input amount and a preset Chinese character-numerical mapping relationship. However, this invention cannot distinguish the currency symbol of the input amount or the display format of different currencies. Summary of the Invention
[0004] In view of the shortcomings of the existing technology, the purpose of this invention is to provide a method and system for implementing a Vue-based amount component.
[0005] According to the present invention, a method for implementing a Vue-based amount component includes:
[0006] Step S1: Encapsulate a formatted amount component based on the Vue framework, setting parameters and corresponding parameter processing methods;
[0007] Step S2: Encapsulate the method function in the amount component;
[0008] Step S3: Register the encapsulated amount component, import the amount component into the functional module, and configure the passed attribute parameters;
[0009] Step S4: After configuring the attribute parameters, enter the amount in the amount component to achieve customized amount conversion.
[0010] Preferably, in step S1:
[0011] Step S1.1: Create a new Vue file, write an input box in the file, set the props parameters that need to be passed by the parent component, the parameter thousand indicates the thousands separator, the parameter radixPoint indicates the number of standardized decimal places, the parameter currency indicates the currency, and the parameter zh indicates the Chinese version of the amount text;
[0012] Step S1.2: Write corresponding function methods in the component using custom attribute parameters. The thousandths separator is implemented using the custom function thousandSplit(), the number of decimal places is standardized using the custom function toRadixPoint(), the currency conversion is implemented using the custom function convertCurrency(), and the amount is displayed in uppercase Chinese characters using the custom function convertChinese().
[0013] Preferably, in step S2:
[0014] Step S2.1: The custom function thousandsplit() internally uses regular expressions to separate the input amount into thousands separators and commas. It divides the number into integer and decimal parts according to the decimal point, separates the integer part into commas, and uses regular expressions to merge the integer and decimal parts using the join method, thus achieving thousands separator of the input amount.
[0015] Step S2.2: The custom function convertCurrency() uses the BigInt data type and is implemented through BigInt.prototype.toLocaleString(). It determines the currency of the amount based on the currency parameter passed by the component. The custom function behavior is implemented through locales and options to realize the currency symbol of the amount and the display format of the amount in different currencies.
[0016] Step S2.3: The custom function toRadixPoint() is implemented using regular expressions to precisely determine the number of decimal places in the amount, and to validate the number of decimal places in the input amount;
[0017] Step S2.4: The custom function convertChinese() lists the required units for the Chinese currency in uppercase, sets the maximum and minimum number of units to be processed, handles the parameter cases, and concatenates and integrates the integer and decimal units to display the amount in uppercase Chinese characters.
[0018] Preferably, in step S3:
[0019] Step S3.1: Import the amount component, find the relative path of the amount component file, name the imported amount component, register it in the Components object, and reference the amount component in the template of the specified page;
[0020] Step S3.2: In the amount component, bind the parameter attributes passed to the amount component through v-bind, and bind the input amount through v-model to achieve real-time data response.
[0021] Preferably, in step S4:
[0022] After the amount is entered, based on the parameters bound to the component, thousandand formats the amount as thousands separators, radixPoint standardizes the amount to the required number of decimal places, currency displays the currency of the amount, and zh displays the amount in uppercase Chinese characters.
[0023] According to the present invention, a Vue-based monetary component implementation system includes:
[0024] Module M1: This module encapsulates a formatted amount component based on the Vue framework, including setting parameters and methods for processing those parameters.
[0025] Module M2: Encapsulates methods and functions within the amount component;
[0026] Module M3: Registers the encapsulated amount component, imports the amount component into the functional module, and configures the passed attribute parameters;
[0027] Module M4: After configuring the attribute parameters, enter the amount in the amount component to achieve customized amount conversion.
[0028] Preferably, in module M1:
[0029] Module M1.1: Create a new Vue file, write an input box in the file, set the props parameters that need to be passed by the parent component, the parameter thousand indicates the thousands separator, the parameter radixPoint indicates the number of standardized decimal places, the parameter currency indicates the currency, and the parameter zh indicates the Chinese version of the amount text;
[0030] Module M1.2: Different function methods are written in the component through custom attribute parameters. The thousandths separator is implemented by the custom function thousandSplit(), the number of decimal places is standardized by the custom function toRadixPoint(), the currency conversion is implemented by the custom function convertCurrency(), and the amount is displayed in uppercase Chinese characters by the custom function convertChinese().
[0031] Preferably, in module M2:
[0032] Module M2.1: The custom function thousandsplit() internally uses regular expressions to separate the input amount into thousands separators and commas. It divides the number into integer and decimal parts according to the decimal point, separates the integer part into integer and decimal parts, and uses regular expressions to merge the integer and decimal parts using the join method, thus achieving thousands separator for the input amount.
[0033] Module M2.2: The custom function convertCurrency() uses the BigInt data type and is implemented through BigInt.prototype.toLocaleString(). It determines the currency of the amount based on the currency parameter passed by the component. The custom function behavior is implemented through locales and options to realize the currency symbol of the amount and the display format of the amount in different currencies.
[0034] Module M2.3: The custom function toRadixPoint() is implemented using regular expressions to precisely determine the decimal places of the amount and to validate the number of decimal places in the input amount;
[0035] Module M2.4: The custom function convertChinese() lists the required units for uppercase RMB, sets the maximum and minimum number of units to be processed, handles parameter cases, and concatenates and combines integer and decimal units to display the uppercase Chinese characters of the amount.
[0036] Preferably, in module M3:
[0037] Module M3.1: Import the amount component, find the relative path of the amount component file, name the imported amount component, register it in the Components object, and reference the amount component in the template of the specified page;
[0038] Module M3.2: In the amount component, the parameter attributes passed to the amount component are bound by v-bind, and the input amount is bound bidirectionally by v-model to achieve real-time data response.
[0039] Preferably, in module M4:
[0040] After the amount is entered, based on the parameters bound to the component, thousandand formats the amount as thousands separators, radixPoint standardizes the amount to the required number of decimal places, currency displays the currency of the amount, and zh displays the amount in uppercase Chinese characters.
[0041] Compared with the prior art, the present invention has the following beneficial effects:
[0042] 1. This invention can perform various operations on the input amount to achieve standardization and formatting of the amount, such as separating by thousands, distinguishing multiple currencies, such as RMB ¥, Euro EUR, etc., controlling decimal places, and displaying the corresponding Chinese characters for the amount according to Chinese people's habits;
[0043] 2. This invention distinguishes the currency symbol for the input amount and displays different currency amounts in various formats;
[0044] 3. This invention enables verification of the number of digits in the amount;
[0045] 4. This invention enables the conversion between numerical amounts and the Chinese characters for RMB in uppercase.
[0046] 5. This invention transmits the required parameters to the component according to the current functional requirements. Currently, this component can basically meet the needs of various project scenarios in the bank.
[0047] 6. This invention reduces development time, has high reusability, greatly increases development efficiency, and is simple to operate, which can improve office efficiency and ensure the accuracy and standardization of input amounts. Attached Figure Description
[0048] Other features, objects, and advantages of the present invention will become more apparent from the following detailed description of non-limiting embodiments with reference to the accompanying drawings:
[0049] Figure 1 This is a flowchart of the present invention. Detailed Implementation
[0050] The present invention will now be described in detail with reference to specific embodiments. These embodiments will help those skilled in the art to further understand the present invention, but do not limit the invention in any way. It should be noted that those skilled in the art can make several changes and improvements without departing from the concept of the present invention. These all fall within the protection scope of the present invention.
[0051] Example 1:
[0052] This amount component uses a parent-child component approach to pass values to each other. The parent component passes parameters to the child component via v-bind, and the child component receives the parameters passed by the parent component via props. The child component then encapsulates functions and methods to perform various operations on the amount, making the format standardized.
[0053] This amount component uses the new data type BigInt, and its toLocaleString() method allows for custom function behavior through options and locales, thereby enabling the differentiation of currency symbols and the display format of different currencies for the input amount.
[0054] This amount component uses regular expressions to validate the amount to two decimal places. The regular expression newRegExp(^[0-9]+(.[0-9]{2})?$) is used to validate the number of decimal places in the input amount, thus achieving the validation of the number of decimal places.
[0055] This amount component uses a custom encapsulated function method `convertChinese()`. This method requires listing the required units for uppercase RMB, setting the maximum and minimum processing numbers, and handling some parameter cases, such as whether the parameter is a string or whether there is a decimal. This enables the conversion between numerical amounts and uppercase RMB characters.
[0056] According to the present invention, a method for implementing a Vue-based amount component is provided, such as... Figure 1 As shown, it includes:
[0057] Step S1: Encapsulate a formatted amount component based on the Vue framework, setting parameters and corresponding parameter processing methods;
[0058] Specifically, in step S1:
[0059] Step S1.1: Create a new Vue file, write an input box in the file, set the props parameters that need to be passed by the parent component, the parameter thousand indicates the thousands separator, the parameter radixPoint indicates the number of standardized decimal places, the parameter currency indicates the currency, and the parameter zh indicates the Chinese version of the amount text;
[0060] Step S1.2: Write corresponding function methods in the component using custom attribute parameters. The thousandths separator is implemented using the custom function thousandSplit(), the number of decimal places is standardized using the custom function toRadixPoint(), the currency conversion is implemented using the custom function convertCurrency(), and the amount is displayed in uppercase Chinese characters using the custom function convertChinese().
[0061] Step S2: Encapsulate the method function in the amount component;
[0062] Specifically, in step S2:
[0063] Step S2.1: The custom function thousandsplit() internally uses regular expressions to separate the input amount into thousands separators and commas. It divides the number into integer and decimal parts according to the decimal point, separates the integer part into commas, and uses regular expressions to merge the integer and decimal parts using the join method, thus achieving thousands separator of the input amount.
[0064] Step S2.2: The custom function convertCurrency() uses the BigInt data type and is implemented through BigInt.prototype.toLocaleString(). It determines the currency of the amount based on the currency parameter passed by the component. The custom function behavior is implemented through locales and options to realize the currency symbol of the amount and the display format of the amount in different currencies.
[0065] Step S2.3: The custom function toRadixPoint() is implemented using regular expressions to precisely determine the number of decimal places in the amount, and to validate the number of decimal places in the input amount;
[0066] Step S2.4: The custom function convertChinese() lists the required units for the Chinese currency in uppercase, sets the maximum and minimum number of units to be processed, handles the parameter cases, and concatenates and integrates the integer and decimal units to display the amount in uppercase Chinese characters.
[0067] Step S3: Register the encapsulated amount component, import the amount component into the functional module, and configure the passed attribute parameters;
[0068] Specifically, in step S3:
[0069] Step S3.1: Import the amount component, find the relative path of the amount component file, name the imported amount component, register it in the Components object, and reference the amount component in the template of the specified page;
[0070] Step S3.2: In the amount component, bind the parameter attributes passed to the amount component through v-bind, and bind the input amount through v-model to achieve real-time data response.
[0071] Step S4: After configuring the attribute parameters, enter the amount in the amount component to achieve customized amount conversion.
[0072] Specifically, in step S4:
[0073] After the amount is entered, based on the parameters bound to the component, thousandand formats the amount as thousands separators, radixPoint standardizes the amount to the required number of decimal places, currency displays the currency of the amount, and zh displays the amount in uppercase Chinese characters.
[0074] Example 2:
[0075] Example 2 is a preferred embodiment of Example 1, and is used to illustrate the present invention in more detail.
[0076] The present invention also provides a Vue-based monetary component implementation system, which can be implemented by executing the process steps of the Vue-based monetary component implementation method. That is, those skilled in the art can understand the Vue-based monetary component implementation method as a preferred embodiment of the Vue-based monetary component implementation system.
[0077] According to the present invention, a Vue-based monetary component implementation system includes:
[0078] Module M1: This module encapsulates a formatted amount component based on the Vue framework, including setting parameters and methods for processing those parameters.
[0079] Specifically, in module M1:
[0080] Module M1.1: Create a new Vue file, write an input box in the file, set the props parameters that need to be passed by the parent component, the parameter thousand indicates the thousands separator, the parameter radixPoint indicates the number of standardized decimal places, the parameter currency indicates the currency, and the parameter zh indicates the Chinese version of the amount text;
[0081] Module M1.2: Different function methods are written in the component through custom attribute parameters. The thousandths separator is implemented by the custom function thousandSplit(), the number of decimal places is standardized by the custom function toRadixPoint(), the currency conversion is implemented by the custom function convertCurrency(), and the amount is displayed in uppercase Chinese characters by the custom function convertChinese().
[0082] Module M2: Encapsulates methods and functions within the amount component;
[0083] Specifically, in module M2:
[0084] Module M2.1: The custom function thousandsplit() internally uses regular expressions to separate the input amount into thousands separators and commas. It divides the number into integer and decimal parts according to the decimal point, separates the integer part into integer and decimal parts, and uses regular expressions to merge the integer and decimal parts using the join method, thus achieving thousands separator for the input amount.
[0085] Module M2.2: The custom function convertCurrency() uses the BigInt data type and is implemented through BigInt.prototype.toLocaleString(). It determines the currency of the amount based on the currency parameter passed by the component. The custom function behavior is implemented through locales and options to realize the currency symbol of the amount and the display format of the amount in different currencies.
[0086] Module M2.3: The custom function toRadixPoint() is implemented using regular expressions to precisely determine the decimal places of the amount and to validate the number of decimal places in the input amount;
[0087] Module M2.4: The custom function convertChinese() lists the required units for uppercase RMB, sets the maximum and minimum number of units to be processed, handles parameter cases, and concatenates and combines integer and decimal units to display the uppercase Chinese characters of the amount.
[0088] Module M3: Registers the encapsulated amount component, imports the amount component into the functional module, and configures the passed attribute parameters;
[0089] Specifically, in module M3:
[0090] Module M3.1: Import the amount component, find the relative path of the amount component file, name the imported amount component, register it in the Components object, and reference the amount component in the template of the specified page;
[0091] Module M3.2: In the amount component, the parameter attributes passed to the amount component are bound by v-bind, and the input amount is bound bidirectionally by v-model to achieve real-time data response.
[0092] Module M4: After configuring the attribute parameters, enter the amount in the amount component to achieve customized amount conversion.
[0093] Specifically, in module M4:
[0094] After the amount is entered, based on the parameters bound to the component, thousandand formats the amount as thousands separators, radixPoint standardizes the amount to the required number of decimal places, currency displays the currency of the amount, and zh displays the amount in uppercase Chinese characters.
[0095] Example 3:
[0096] Example 3 is a preferred example of Example 1, and is used to illustrate the present invention in more detail.
[0097] Step 1: Encapsulate a formatted amount component based on the Vue framework, set the parameters to be passed, and the corresponding parameter processing methods.
[0098] Step 2: Encapsulate method functions in this component, including functions for separating thousands separators, converting currency amounts, standardizing decimal points, and converting Chinese characters for uppercase RMB.
[0099] Step 3: Register the encapsulated amount component on the specified page or in the global components, import the component into the required functional module, and configure the parameter attributes to be passed according to business requirements.
[0100] Step 4: After configuring the attribute parameters, and assuming no errors occur, enter the amount in the amount component according to your needs to achieve customized amount conversion.
[0101] Step 1 includes the following steps:
[0102] Step 1.1: Create a new Vue file, write an input box in the file, and set the props parameters that need to be passed by the parent component. For example, the parameter thousand indicates the thousands separator, the parameter radixPoint indicates the number of standardized decimal places, the parameter currency indicates the currency type, and the parameter zh indicates the Chinese version of the amount text.
[0103] Step 1.2: In the component, write corresponding function methods using the custom attribute parameters you just defined. The thousandths separator is implemented using the custom function thousandSplit(), the number of decimal places is standardized using the custom function toRadixPoint(), the currency conversion is implemented using the custom function convertCurrency(), and the amount is displayed in uppercase Chinese characters using the custom function convertChinese().
[0104] Step 2 includes the following steps:
[0105] Step 2.1: The custom function thousandsplit() internally uses regular expressions to separate the input amount into thousands separators. First, the number needs to be divided into integer and decimal parts according to the decimal point. Since the amount has two decimal places, we only need to separate the integer part with a comma and use the regular expression new RegExp(' / \B(?=(\d{3}+(?!\d)) / g'). Finally, the join method is used to merge the integer and decimal parts, thus achieving thousands separator of the input amount.
[0106] Step 2.2: The custom function convertCurrency() uses the new data type BigInt, mainly implemented through BigInt.prototype.toLocaleString(). It determines the currency of the amount based on the currency parameter passed by the component. By customizing the function behavior through locales and options, it implements the currency symbol of the amount and the display format of different currencies.
[0107] Step 2.3: The custom function toRadixPoint() uses regular expressions to implement this, using the regular expression newRegExp(^[0-9]+(.[0-9]{2})?$) to specify the decimal places of the amount and to validate the number of decimal places in the input amount.
[0108] Step 2.4: The custom function convertChinese() needs to list the required units for the Chinese currency in uppercase, set the maximum and minimum number of units to be processed, and handle some parameter cases, such as whether the parameter is a string or whether there is a decimal. Finally, the integer and decimal units are concatenated and combined to display the amount in uppercase Chinese characters.
[0109] Step 3 includes the following steps:
[0110] Step 3.1: First, you need to import the amount component. You need to find the relative path of the component to the file, give the imported component an alias, register it in the Components object, and then display it on the specified page. <template>Reference this component.
[0111] Step 3.2: According to the requirements, bind the parameter attributes that need to be passed to the amount component, such as thousand, radixPoint, currency, zh, in the component using v-bind, and use v-model to bind the input amount in two directions to achieve real-time data response.
[0112] Step 4.1: After the amount is entered, when the component loses focus, it will perform the amount operation according to the parameters bound to the component, such as thousandths to format the amount into thousands separators, radixPoint to standardize the amount to the required number of decimal places, currency to display the currency of the amount, and zh to display the amount in uppercase Chinese characters, to achieve the formatting and standardization of the amount.
[0113] Those skilled in the art will understand that, in addition to implementing the system, apparatus, and their modules provided by this invention in purely computer-readable program code, the same program can be implemented in the form of logic gates, switches, application-specific integrated circuits, programmable logic controllers, and embedded microcontrollers by logically programming the method steps. Therefore, the system, apparatus, and their modules provided by this invention can be considered a hardware component, and the modules included therein for implementing various programs can also be considered structures within the hardware component; alternatively, modules for implementing various functions can be considered both software programs implementing the method and structures within the hardware component.
[0114] Specific embodiments of the present invention have been described above. It should be understood that the present invention is not limited to the specific embodiments described above, and those skilled in the art can make various changes or modifications within the scope of the claims, which do not affect the essence of the present invention. Unless otherwise specified, the embodiments and features described in this application can be arbitrarily combined with each other.< / template>
Claims
1. A vue-based amount component implementation method, characterized in that, include: Step S1: Encapsulate a formatted amount component based on the Vue framework, setting parameters and corresponding parameter processing methods; Step S2: Encapsulate the method function in the amount component; Step S3: Register the encapsulated amount component, import the amount component into the functional module, and configure the passed attribute parameters; Step S4: After configuring the attribute parameters, enter the amount in the amount component to achieve customized amount conversion; In step S2: Step S2.1: The custom function thousandsplit() internally uses regular expressions to separate the input amount into thousands separators and commas. It divides the number into integer and decimal parts according to the decimal point, separates the integer part into commas, and uses regular expressions to merge the integer and decimal parts using the join method, thus achieving thousands separator of the input amount. Step S2.2: The custom function convertCurrency() uses the BigInt data type and is implemented through BigInt.prototype.toLocaleString(). It determines the currency of the amount based on the currency parameter passed by the component. The custom function behavior is implemented through locales and options to realize the currency symbol of the amount and the display format of the amount in different currencies. Step S2.3: The custom function toRadixPoint() is implemented using regular expressions to precisely determine the number of decimal places in the amount, and to validate the number of decimal places in the input amount; Step S2.4: The custom function convertChinese() lists the required units for the Chinese currency in uppercase, sets the maximum and minimum number of units to be processed, handles the parameter cases, and concatenates and integrates the integer and decimal units to display the amount in uppercase Chinese characters.
2. The vue-based amount component implementation method of claim 1, wherein, In step S1: Step S1.1: Create a new Vue file, write an input box in the file, set the props parameters that need to be passed by the parent component, the parameter thousand indicates the thousands separator, the parameter radixPoint indicates the number of standardized decimal places, the parameter currency indicates the currency, and the parameter zh indicates the Chinese version of the amount text; Step S1.2: Write corresponding function methods in the component using custom attribute parameters. The thousandths separator is implemented using the custom function thousandSplit(), the number of decimal places is standardized using the custom function toRadixPoint(), the currency conversion is implemented using the custom function convertCurrency(), and the amount is displayed in uppercase Chinese characters using the custom function convertChinese().
3. The vue-based amount component implementation method of claim 1, wherein, In step S3: Step S3.1: Import the amount component, find the relative path of the amount component file, name the imported amount component, register it in the Components object, and reference the amount component in the template of the specified page; Step S3.2: In the amount component, bind the parameter attributes passed to the amount component through v-bind, and bind the input amount through v-model to achieve real-time data response.
4. The vue-based amount component implementation method of claim 1, wherein, In step S4: After the amount is entered, based on the parameters bound to the component, thousandand formats the amount as thousands separators, radixPoint standardizes the amount to the required number of decimal places, currency displays the currency of the amount, and zh displays the amount in uppercase Chinese characters.
5. A Vue-based system for implementing a monetary component, characterized in that, include: Module M1: This module encapsulates a formatted amount component based on the Vue framework, including setting parameters and methods for processing those parameters. Module M2: Encapsulates methods and functions within the amount component; Module M3: Registers the encapsulated amount component, imports the amount component into the functional module, and configures the passed attribute parameters; Module M4: After configuring the attribute parameters, enter the amount in the amount component to achieve customized amount conversion; In module M2: Module M2.1: The custom function thousandsplit() internally uses regular expressions to separate the input amount into thousands separators and commas. It divides the number into integer and decimal parts according to the decimal point, separates the integer part into integer and decimal parts, and uses regular expressions to merge the integer and decimal parts using the join method, thus achieving thousands separator for the input amount. Module M2.2: The custom function convertCurrency() uses the BigInt data type and is implemented through BigInt.prototype.toLocaleString(). It determines the currency of the amount based on the currency parameter passed by the component. The custom function behavior is implemented through locales and options to realize the currency symbol of the amount and the display format of the amount in different currencies. Module M2.3: The custom function toRadixPoint() is implemented using regular expressions to precisely determine the decimal places of the amount and to validate the number of decimal places in the input amount; Module M2.4: The custom function convertChinese() lists the required units for uppercase RMB, sets the maximum and minimum number of units to be processed, handles parameter cases, and concatenates and combines integer and decimal units to display the uppercase Chinese characters of the amount.
6. The vue-based amount component implementation system of claim 5, wherein, In module M1: Module M1.1: Create a new Vue file, write an input box in the file, set the props parameters that need to be passed by the parent component, the parameter thousand indicates the thousands separator, the parameter radixPoint indicates the number of standardized decimal places, the parameter currency indicates the currency, and the parameter zh indicates the Chinese version of the amount text; Module M1.2: Different function methods are written in the component through custom attribute parameters. The thousandths separator is implemented by the custom function thousandSplit(), the number of decimal places is standardized by the custom function toRadixPoint(), the currency conversion is implemented by the custom function convertCurrency(), and the amount is displayed in uppercase Chinese characters by the custom function convertChinese().
7. The vue-based amount component implementation system of claim 5, wherein, In module M3: Module M3.1: Import the amount component, find the relative path of the amount component file, name the imported amount component, register it in the Components object, and reference the amount component in the template of the specified page; Module M3.2: In the amount component, the parameter attributes passed to the amount component are bound by v-bind, and the input amount is bound bidirectionally by v-model to achieve real-time data response.
8. The vue-based amount component implementation system of claim 5, wherein, In module M4: After the amount is entered, based on the parameters bound to the component, thousandand formats the amount as thousands separators, radixPoint standardizes the amount to the required number of decimal places, currency displays the currency of the amount, and zh displays the amount in uppercase Chinese characters.