前言
最近在维护一个比较老的后台管理系统，用的是vue2+element-ui（2.1.0版本），虽然组件库旧了点但也不是不能用，毕竟后台管理系统简单高效为主，然而有个新需求需要输入数字且显示千分位符号，找官网Input 输入框组件就没有这么个功能，没办法只能自己写了。
一、方法1
1. 主要代码
<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. 正则原理：
正则表达式/\B(?=(\d{3})+(?!\d))/怎样给数字添加千分符的？简单来说这个正则表达式分为三部分：
\B：元字符，匹配某个空格?=(\d{3})+：先行断言，匹配后面跟了3的倍数个数字的位置(?!\d)：后行断言，在这个位置（3的倍数个数字）之后不能再有数字了
推荐 这篇文章 ，需要有一定的正则功底才能写得出来，不过读完别人大佬的文章后应该比较好理解了，实在不想用正则的同学可以用下面的方法。
二、方法2
1. 主要代码
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原理：
这个推荐直接看 MDN文档，简单来说就是对于Number类型可以调用其toLocaleString()方法，默认会返回在 (en-US)环境下的经过格式化的字符串。
toLocaleString() 方法非常强大，在多种数据类型下都有此方法，在Number类型下用得比较多，如果想对数字格式化显示为千分符且保留指定位的小数这将非常好用。
比如可以指定显示为两位小数：
(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'
三、Element Plus 自带格式化
基于 Vue 3 的Element Plus已经自带输入框的格式化功能，所以就方便得多了，官网使用示例：
<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>
总结
以上就是全部内容，本文展示了给input组件增加数字千分符的方法，介绍了toLocaleString的基本使用方式。如果此篇文章对您有帮助，欢迎您【点赞】、【收藏】！也欢迎您【评论】留下宝贵意见，共同探讨一起学习~