el-input只能输入整数,小数、最多保留一位小数
时间: 2023-09-28 10:12:44 浏览: 199
input框只能输入数字和一个小数点
3星 · 编辑精心推荐
您可以在使用el-input组件时添加一个限制器,使用正则表达式来限制只能输入整数或者小数,且最多只能保留一位小数。以下是一个示例代码:
```html
<el-input v-model="inputValue" :maxlength="maxLength" :onkeypress="handleKeyPress"></el-input>
```
```javascript
data() {
return {
inputValue: '',
maxLength: 5
}
},
methods: {
handleKeyPress(e) {
const regExp = /^\d+(\.\d{0,1})?$/
const key = String.fromCharCode(e.keyCode)
if (!regExp.test(this.inputValue + key)) {
e.preventDefault()
}
}
}
```
在上面的代码中,我们使用了正则表达式来限制只能输入整数或小数,并且最多只能保留一位小数。在方法`handleKeyPress`中,我们使用了`keydown`事件来判断用户输入的内容是否符合规则,如果不符合规则,则阻止默认事件,以此来达到限制输入的目的。
阅读全文