子组件代码

<template>
  <a-input :placeholder="placeHolder" :suffix="suffix" :disabled='props.disabled' v-model:value='modelValue'
    :maxLength="inputLength" @input="UpNumber" @keyup="UpNumber" @keydown.enter.native.prevent="UpNumber"
    :style="{ width: widthPx + 'px' }" :bordered="!props.disabled" class="detailNoBorder" @blur="checkInput"
    autocomplete="off" :show-count="props.showCount" :class="{ 'showCount': props.showCount }" />
</template>

<script setup lang="ts">
import {
  computed
} from "vue";
const props = defineProps({
  modelValue: {
    type: Number
  },
  placeHolder: {
    type: String
  },
  replaceRule: {
    type: String,//整数
    default: ''
  },
  zeroAllow: {
    type: Boolean,//是否可以输入零
    default: true
  },
  showCount: {
    type: Boolean,
    default: false
  },
  suffix: {
    type: String,
    default: ''//后缀
  },
  widthPx: {
    type: String//输入框长度
  },
  disabled: {
    type: Boolean
  },
  inputLength: {
    type: Number,//最大输入位数
    default: 9
  },
  stepTwo: {
    type: Number,//保留两位小数
  }
})
const emit = defineEmits(["update:modelValue"])
const modelValue = computed({
  get: () => props.modelValue,
  set: (value) => emit("update:modelValue", value),
})
const UpNumber = (e) => {
  if (props.replaceRule == 'onlyNumber' && props.zeroAllow) {
    e.target.value = e.target.value.replace(/[^\d]/g, "");
  } else if (props.replaceRule == 'onlyNumber' && !props.zeroAllow) {
    var reg = /^$|^[1-9]\d*$/;
    if (!reg.exec(e.target.value)) {
      e.target.value = null
    }
  } else if (props.stepTwo) {
    // 小数点后的位数
    e.target.value = getNum(e)
  } else {
    e.target.value = e.target.value.replace(/[^\d.]/g, "");
  }
  emit("update:modelValue", e.target.value && props.replaceRule == 'onlyNumber' && props.zeroAllow ? Number(e.target.value) : e.target.value ? e.target.value : null)
}
const getNum = (obj) => {
  let checkPlan = obj.target.value
  checkPlan = checkPlan
    .replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
    .replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
    .replace(/^\./g, '') // 保证第一个为数字而不是.
    .replace('.', '$#$')
    .replace(/\./g, '')
    .replace('$#$', '.')
  if (checkPlan.indexOf('.') < 0 && checkPlan !== '') {
    // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
    checkPlan = parseFloat(checkPlan) + ''
  } else if (checkPlan.indexOf('.') >= 0) {
    if (props.stepTwo == 2) {
      checkPlan = checkPlan
        .replace(/^()*(\d+)\.(\d\d).*$/, '$1$2.$3') // 只能输入两个小数
    } else if (props.stepTwo == 1) {
      checkPlan = checkPlan
        .replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3') // 只能输入1个小数
    }

  }
  return checkPlan;
}
const checkInput = (e) => {
  let newNum = e.target.value;

  if (newNum.charAt(0) == '0' && newNum.charAt(1) != '.' && !props.zeroAllow) {
    // 把第一个字符去掉，返回剩余部分
    newNum = newNum.substring(1)
  }
  if (newNum.charAt(newNum.length - 1) == '.') {
    // 后面加上00
    // newNum = newNum + '00'
    newNum = Number(newNum)
  }
  // 赋值
  emit("update:modelValue", newNum)
}
</script>

<style lang="less" scoped>
.showCount :deep(.ant-input-suffix) {
  color: #CCCCCC;
}
</style>

父组件中应用

<template>
	<inputNumber ref="inputNumberRef" v-model='lowestPrice' :disabled='disabledStatus' placeHolder="请输入消费金额" suffix="元"  widthPx="199" replaceRule='numberSpot'>
	</inputNumber>
</template>
<script setup lang="ts">
import inputNumber from '@/components/NumberInput/index.vue'
const lowestPrice=ref(0)
const disabled=ref(false)
const placeHolder=ref('请输入')
</script>