Ant Design of Vue inputNumber如何只输入整数 和 控制小数点位数

霍永年
2023-12-01

控制只能输入整数

 <a-input-number
    v-decorator="[item.attributeCode]"
    :min="0"
    :formatter='limitNumber'
    :parser='limitNumber'
  />
 /* 限制数字输入框只能输入整数 */
  const limitNumber = value => {
    if (typeof value === 'string') {
      return !isNaN(Number(value)) ? value.replace(/^(0+)|[^\d]/g, '') : ''
    } else if (typeof value === 'number') {
      return !isNaN(value) ? String(value).replace(/^(0+)|[^\d]/g, '') : ''
    } else {
      return ''
    }
  }
data 里定义
  data() {
    return {
      limitNumber: limitNumber,
    }
  },

控制小数点个数

  <a-input-number
    v-decorator="[item.attributeCode]"
    :min="0"
    :step="0.01"
    :formatter="(value)=>{
      let reg = /^(-)*(\d+)\.(\d\d).*$/;
      return `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',').replace(reg,'$1$2.$3');
    }"
    :parser="(value)=>{
      let reg = /^(-)*(\d+)\.(\d\d).*$/;
      return value.replace(/\s?|(,*)/g, '').replace(reg,'$1$2.$3');
    }"
  />
 类似资料: