el-input 限制只能输入负数、正数或2位小数的数值

需求

el-input需要指定输入格式，当键盘事件触发时限制只能输入负数、正数或2位小数的数值。

解决方案

自定义校验数字输入的键盘事件方法函数。

具体实现步骤

1、创建验数字输入的键盘事件方法

 /**
 * 校验数字输入的键盘事件
 * @param {Event} event - 键盘事件对象
 * @param {Object} options - 配置项
 * @param {boolean} options.allowNegative - 是否允许负数，默认true
 * @param {boolean} options.allowDecimal - 是否允许小数，默认true
 * @param {number} options.decimalPlaces - 小数位数，默认2
 * @returns {boolean} - 返回是否允许当前输入
 */
validateNumberKeypress(event, options = {}) {
  const { allowNegative = true, allowDecimal = true, decimalPlaces = 2 } = options
  const keyCode = event.keyCode ? event.keyCode : event.which

  // 允许数字
  const isNumber = keyCode >= 48 && keyCode <= 57
  // 允许负号
  const isDash = keyCode === 45 && allowNegative
  // 允许小数点
  const isDot = keyCode === 46 && allowDecimal

  // 如果不是允许的字符，阻止输入
  if (!isNumber && !isDash && !isDot) {
    event.preventDefault()
    return false
  }

  const value = event.target.value
  // 如果是负号，只允许在开头输入一次
  if (isDash && value.includes('-')) {
    event.preventDefault()
    return false
  }

  // 如果是小数点，只允许输入一次
  if (isDot && value.includes('.')) {
    event.preventDefault()
    return false
  }

  // 限制小数位数
  if (allowDecimal && value.includes('.')) {
    const parts = value.split('.')
    if (parts[1] && parts[1].length >= decimalPlaces && isNumber) {
      event.preventDefault()
      return false
    }
  }

  return true
}

2、el-input绑定校验方法

  <el-input
     v-model="formInfo.amountYear"
     clearable
     @click.native.stop
     @keypress.native="onlyNumber"
   ></el-input>

写在最后

validateNumberKeypress可直接复制进行使用，最好加上@click.native.stop防止事件冒泡。