The input component of the Vue2 version of ElementUI adds a thousand cents

---

Preface

Recently, I am maintaining an older backend management system, using vue2+element-ui (version 2.1.0). Although the component library is a bit old, it is not unusable. After all, the backend management system is mainly simple and efficient. However, there is The new requirement requires the input of numbers and the display of thousandths symbols. The Input input box component found on the official website does not have such a function, so I have no choice but to write it myself.

---

1. Method 1

1. Main code

<el-input
    v-model="form.formatterValue"
    @input="handleInput">
</el-input>

methods: {
    
    
    handleInput(val) {
    
    
    	// nextTick确保数据与视图同步
    	this.$nextTick(() => {
    
    
    		// \D:表示非数字，确保输入框只能输入数字
        	this.form.formatterValue = val.replace(/\D/g, "");
        	// 得到经过非数字过滤后的值
        	const data = val.replace(/\D/g, "");
        	// 将值暂存起来
        	this.realValue = data;
        	// 最关键的步骤：添加千分符
        	this.form.formatterValue = data.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      	});
    },
}

2. Regular principle:

Regular Expression/\B(?=(\d{3})+(?!\d))/How to add thousand separators to numbers? Simply put, this regular expression is divided into three parts:

1. \B: metacharacter, matches a space
2. ?=(\d{3})+: Predicate assertion, matching positions followed by numbers that are multiples of 3
3. (?!\d): Post-line assertion, there can be no more numbers after this position (numbers that are multiples of 3)

RecommendedThis article requires a certain level of regularity skills to write, but after reading other people’s articles, you should compare It’s easy to understand. Students who really don’t want to use regular expressions can use the following method.

2. Method 2

1. Main code

methods: {
    
    
    handleInput(val) {
    
    
    	this.$nextTick(() => {
    
    
        	this.form.formatterValue = val.replace(/\D/g, "");
        	const data = val.replace(/\D/g, "");
        	this.realValue = data;
    	    if (!data) {
    
    
          		this.form.formatterValue = "";
        	} else {
    
    
          		this.form.formatterValue = Number(data).toLocaleString();
        	}
      	});
    },
}

2. toLocaleString principle:

This is recommended to directly readMDN documentation. Simply put, you can call its toLocaleString() method for the Number type. , the formatted string in the (en-US) environment will be returned by default.
The toLocaleString() method is very powerful. It is available in many data types. It is often used in the Number type. If you want to format the number and display it as thousand cents and retain the specified decimal places This would work great.

For example, you can specify the display to two decimal places:

(2.129).toLocaleString('en-US',{
    
     minimumFractionDigits: 2, maximumFractionDigits: 2 })  //=> '2.13'

(2.1).toLocaleString(undefined, {
    
     minimumFractionDigits: 2, maximumFractionDigits: 2 }) //=> '2.10'

(2).toLocaleString(undefined, {
    
     minimumFractionDigits: 2, maximumFractionDigits: 2 })  //=> '2.00'

3. Element Plus comes with formatting

Element Plus based on Vue 3 already has the formatting function of the input box, so it is much more convenient.Official website usage example:

<template>
  <el-input
    v-model="input"
    placeholder="Please input"
    :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
    :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
  />
</template>

<script lang="ts" setup>
import {
    
     ref } from 'vue'
const input = ref('')
</script>

---

Summarize

That’s all. This article shows how to add digital thousandths to the input component and introduces the basic usage of toLocaleString. If this article is helpful to you, you are welcome to [Like] and [Collect]! You are also welcome to [Comment] to leave your valuable opinions and discuss and learn together~