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 } = optionsconst 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-inputv-model="formInfo.amountYear"[e-mail]@keypress.native="onlyNumber"></el-input>

写在最后

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