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 = false
      inputnum1.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'

<forminpnum @getinputnum="getinputnum"  :resettingnum="resettingnum" ></forminpnum>

方法：

function getinputnum(val){

  operateKeyProjectsInfo.searchForm.plannedCaFrom = val

}

拿到不带有千分位的数字