el-input 怎么限制只能输入两位小数
时间: 2023-07-04 20:17:33 浏览: 181
限制html文本框input只能输入数字和小数点
5星 · 资源好评率100%
您可以使用 Vue.js 中的自定义指令来限制用户在 `el-input` 中只能输入两位小数。
以下是一个示例指令:
```javascript
Vue.directive('number', {
bind: function (el) {
el.addEventListener('input', function () {
let value = el.value;
// 如果输入的不是数字,则替换为空字符串
value = value.replace(/[^\d.]/g, '');
// 如果存在两个以上的小数点,则替换为空字符串
value = value.replace(/\.{2,}/g, '.');
// 如果小数点在第一位,则替换为空字符串
value = value.replace(/^\./g, '');
// 如果小数点在末尾,则替换为空字符串
value = value.replace(/\.$/g, '');
// 如果输入的小数点后面超过两位,则截取前两位小数
if (/\.\d{3,}/.test(value)) {
value = value.slice(0, -1);
}
// 将处理后的值赋值给输入框
el.value = value;
});
}
});
```
在使用 `el-input` 的地方,您只需要在 `v-number` 中使用这个指令即可:
```html
<el-input v-number></el-input>
```
这样,用户在输入时就只能输入两位小数了。
阅读全文