1 <script>
2 /**
3 * MyFormattedInput component, used to format the input numbers and add a thousandth separator 4 *
5 * @props {Number|String} value - The value entered, default to 0 6 */
7 export default {
8 //Component name
9 name: "MyFormattedInput",
10 //Define component props
11 props: {
12 value: {
13 //Supported types are numbers or strings
14 type: [Number, String],
15 //The default value is 0
16 default: 0,
17 },
18 },
19 //Calculate properties
20 computed: {
21 formattedValue: {
22 /**
23 * Get the formatted value 24 *
25 * @returns {String} Formatted string, added with a thousandth of separator 26 */
27 get() {
28 //Print the log when obtaining the value
29 ("get", this.value);
30 //Convert the value to a string and add the thousandth separator
31 return this.().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
32 },
33 /**
34 * Set the formatted value and trigger the input event 35 *
36 * @param {String} formattedValue - formatted value 37 */
38 set(formattedValue) {
39 //Print the log when setting the value
40 ("set", formattedValue);
41 //Get the index of the decimal point
42 const pointIndex = (".");
43 //Determine whether the last character is a decimal point
44 const hasLastPoint = formattedValue[ - 1] === ".";
45 //Determine whether the decimal point is included
46 const hasPoint = (".");
47 if (hasPoint && hasLastPoint) {
48 //If the decimal point is included and the last character is a decimal point, remove the comma and trigger the input event
49 this.$emit("input", (/,/g, ""));
50 } else if (hasPoint && !hasLastPoint) {
51 if ( - 2 > pointIndex) {
52 //If the decimal point is included and there are enough decimal places, remove the comma and retain the two decimal places.
53 this.$emit(
54 "input",
55 this.toFixedNoRound(parseFloat((/,/g, "")), 2)
56 );
57 } else {
58 //If the decimal places are insufficient, remove the comma and trigger the input event
59 this.$emit("input", (/,/g, ""));
60 }
61 } else {
62 //If the decimal point is not included, remove the comma and convert it to a number, if it is NaN, it is 0
63 this.$emit(
64 "input",
65 parseFloat((/,/g, "")) || 0
66 );
67 }
68 },
69 },
70 },
71 //Component method
72 methods: {
73 /**
74 * Process input events 75 *
76 * @param {String} value - the entered value 77 */
78 handleInput(value) {
79 //Print log of input events
80 ("handleInput", value);
81 //Calculate the number of times the decimal point occurs
82 var pointShowCount = (".").length - 1;
83 if (pointShowCount == 0 || pointShowCount == 1) {
84 //If the decimal point appears 0 or 1 times
85 if (isNaN(parseFloat((/,/g, "")))) {
86 //If the comma is removed and the number is not a number, the input event is triggered and 0 is passed in
87 this.$emit("input", 0);
88 }
89 }
90 },
91 /**
92 * Process value change event 93 *
94 * @param {String} value - changed value 95 */
96 handleChange(value) {
97 //Print the log of the value change event
98 ("handleChange", value);
99 if (isNaN(parseFloat((/,/g, "")))) {
100 //If the comma is removed and not a number, the change event is triggered and 0 is passed
101 this.$emit("change", 0);
102 } else {
103 //If it is a number, remove the comma and convert it to a number, if it is NaN, it is 0
104 this.$emit("change", parseFloat((/,/g, "")) || 0);
105 }
106 },
107 /**
108 * Intercept the specified decimal places without rounding109 *
110 * @param {Number} num - the number to be processed111 * @param {Number} decimals - the number of decimal places reserved112 * @returns {String} Processed string, retaining the specified number of decimal places113 */
114 toFixedNoRound(num, decimals) {
115 //Calculate the multiplier
116 const multiplier = (10, decimals);
117 //Intercept the decimal part
118 const truncatedNum = (num * multiplier) / multiplier;
119 //Convert to a string and preserve the specified number of decimal places
120 return (decimals);
121 },
122 },
123 };
124 </script>