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

封装组件

<template>
  <el-input
    @change="changenum"
    @input="onTxtInput"
    @blur="blurInput"
    v-model="inputnum1"
    placeholder="请输入数字"
    clearable
    :disabled="disablednum"
  ></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为禁用
}
// 使用withDefaults可以为props赋默认值
const props = withDefaults(defineProps<popoverProps>(), {
  echoNumber: '',
  resettingnum: false,
  disablednum: false,
})
// 监听存在修改数据
watch(
  () => props.echoNumber,
  newValue => {
    if (props.echoNumber !== undefined) {
      let strnum = String(props.echoNumber)
      // 分离整数部分和小数部分
      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 : '')
      inputnum1.value = inpval
    }
  },
  { 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 onTxtInput(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(val){
      let strnum = String(val.target.value);
      // 分离整数部分和小数部分
      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;   //带有千分位的数值
}


function changenum(val) {
  val = val.replace(/[^\d]/g, '') //不带有千分位的数值
  emit('changeinputnum', Number(val))
}
</script>
<style  scoped>
</style>

使用：

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

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

方法：

function getinputnum(val){

  operateKeyProjectsInfo.searchForm.plannedCaFrom = val

}

拿到不带有千分位的数字