el-input输入数字，带有千分位

封装组件

<template><el-input@change="changenum"@blur="blurInput"v-model="inputnum1"placeholder="请输入数字"clearable:disabled="disablednum":class=" inputcolor ? 'input_num_dis' : '' "></el-input>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
const emit = defineEmits(['getinputnum', 'changeinputnum'])
const inputnum1 = ref('')
interface popoverProps {echoNumber?: string | number //修改时回显数据传参resettingnum?: boolean //查询时重置数据传参，true为重置disablednum?: boolean //详情时数据传参，true为禁用inputcolor?:string  //动态修改样式使用
}
// 使用withDefaults可以为props赋默认值
const props = withDefaults(defineProps<popoverProps>(), {echoNumber: '',resettingnum: false,disablednum: false,inputcolor:'',
})
// 监听存在修改数据
watch(() => props.echoNumber,newValue => {if (props.echoNumber !== undefined) {// 获取原始输入值const originalValue = String(props.echoNumber);// 移除逗号以便转换为数字const cleanValue = originalValue.replace(/,/g, '');// 检查是否为有效的数字if (!/^-?\d+(\.\d+)?$/.test(cleanValue)) {return;}// 转换为数字类型，并保留两位小数const valueAsNumber = Number(cleanValue).toFixed(2);// 分离整数部分和小数部分const parts = valueAsNumber.split('.');const integerPart = parts[0];const decimalPart = parts[1] || '';// 添加千分位分隔符const formattedIntegerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');// 格式化小数部分const formattedDecimalPart = decimalPart ? decimalPart.padEnd(2, '0') : '00';// 组合整数部分和小数部分let formattedValue = formattedIntegerPart + (decimalPart ? '.' + formattedDecimalPart : '.00');// 对于没有小数部分的整数，保留两位小数if (decimalPart === '') {formattedValue = formattedIntegerPart + '.00';}// 设置输入框的值inputnum1.value = formattedValue}},{ immediate: true, deep: true },
)
watch(() => props.resettingnum,newValue => {if(props.resettingnum){props.resettingnum = falseinputnum1.value = ''}},{ immediate: true, deep: true },
)
// val = val.replace(/[^\d]/g,'');  //不带有千分位的数值function changenum(val){val = val.replace(/[^0-9.]/g, '').replace(/(\.)\./g, '$1');let numval = Number(val);if(numval<0){inputnum1.value = '';ElMessage.warning('输入内容不能小于0！')return false}else{let strnum = String(val);// 分离整数部分和小数部分const parts = strnum.split('.');const integerPart = parts[0];const decimalPart = parts[1] || ''; // 如果没有小数部分，则为 ''// 添加千分位分隔符const formattedIntegerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');// 将整数部分和小数部分重新组合const inpval = formattedIntegerPart + (decimalPart ? '.' + decimalPart : '');let val2  = inpval;// inputnum1.value = val2;   //带有千分位的数值emit('getinputnum',Number(val) ,val2)}
}function blurInput(event) {// 获取原始输入值const originalValue = event.target.value;// 移除逗号以便转换为数字const cleanValue = originalValue.replace(/,/g, '');// 检查是否为有效的数字if (!/^-?\d+(\.\d+)?$/.test(cleanValue)) {return;}// 转换为数字类型，并保留两位小数const valueAsNumber = Number(cleanValue).toFixed(2);// 分离整数部分和小数部分const parts = valueAsNumber.split('.');const integerPart = parts[0];const decimalPart = parts[1] || '';// 添加千分位分隔符const formattedIntegerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');// 格式化小数部分const formattedDecimalPart = decimalPart ? decimalPart.padEnd(2, '0') : '00';// 组合整数部分和小数部分let formattedValue = formattedIntegerPart + (decimalPart ? '.' + formattedDecimalPart : '.00');// 对于没有小数部分的整数，保留两位小数if (decimalPart === '') {formattedValue = formattedIntegerPart + '.00';}// 设置输入框的值event.target.value = formattedValue;
}</script>
<style  scoped>
.input_num_dis /deep/ .el-input__inner[disabled] {color: red !important;-webkit-text-fill-color:red !important;
}
</style>

使用：

引用组件 import forminpnum from '@/components/inputNumber/inputnumber.vue'

方法：