el-input 只能输入数字和小数点 保留一位
时间: 2023-09-27 10:08:21 浏览: 115
可以通过设置 el-input 的 type 属性为 number,并使用 step 属性来控制小数点后的位数,并添加一个自定义的输入限制函数,如下所示:
```html
<template>
<el-input v-model="value" type="number" :step="0.1" :oninput="handleInput"></el-input>
</template>
<script>
export default {
data() {
return {
value: ''
}
},
methods: {
handleInput() {
// 只允许输入数字和小数点,且保留一位小数
this.value = this.value.replace(/[^\d\.]/g, '');
const dotIndex = this.value.indexOf('.');
if (dotIndex >= 0) {
this.value = this.value.slice(0, dotIndex + 2);
}
}
}
}
</script>
```
该代码会将 el-input 的 type 属性设置为 number,step 属性设置为 0.1,这样就可以控制小数点后的位数为一位。同时,还需要添加一个自定义的 handleInput 函数来限制输入内容。该函数会先将非数字和小数点的字符替换为空字符串,然后通过 indexOf 方法找到小数点的位置,如果小数点的位置大于等于 0,就截取字符串到小数点后一位。最后,将处理后的值赋值给 v-model 绑定的 value 属性即可。
需要注意的是,el-input 的 type 属性为 number 时,输入框只允许输入数字和小数点,不允许输入其他字符,所以在 handleInput 函数中还需要对输入框的输入进行限制。
阅读全文