藁城 网站大悟网站开发
需求
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"clearable@click.native.stop@keypress.native="onlyNumber"></el-input>
写在最后
validateNumberKeypress可直接复制进行使用，最好加上@click.native.stop防止事件冒泡。