elementui 限制0和正整数
时间: 2023-05-08 09:56:36 浏览: 372
Vue ElementUI实现:限制输入框只能输入正整数的问题
ElementUI 是一款基于 Vue.js 的组件库,提供了丰富的 UI 组件,其中也包括了输入框组件 el-input,该组件提供了多种限制输入的方式,例如限制输入长度、限制输入格式等。
如果需要限制 el-input 只能输入 0 和正整数,可以通过设置其 prop 属性进行实现。具体方式是在 el-input 组件中添加一个 prop 叫做"onkeypress",并将其设为一个方法。该方法会在输入框中按下按键时被触发,我们可以通过判断按键的 keyCode 来限制输入,如果是数字或者 0,就允许输入;否则就阻止输入。
示例代码如下:
```html
<el-input v-model="value" :onkeypress="onlyNumber"></el-input>
```
```javascript
methods: {
onlyNumber(e) {
const key = e.keyCode || e.which
if (key === 48 || key === 8 || (key >= 49 && key <= 57)) {
// 允许输入 0 和正整数
} else {
// 阻止输入
e.preventDefault()
}
}
}
```
以上代码中,如果用户按下了数字键 0 或正整数键(包括键盘上的数字键和小键盘上的数字键),或者按下了退格键,就会允许输入;否则就阻止输入。这样就限制了 el-input 只能输入 0 和正整数。
阅读全文