Element UI——数字输入框解决方案

问题描述

当我们开发项目时，常常想限制用户只能输入纯数字:

官方文档

https://element.eleme.cn/#/zh-CN/component/input

https://element.eleme.cn/#/zh-CN/component/input-number 

解决方案

方法一：el-input + 正则表达式

只需要在el-input标签添加代码,如下图所示:

代码如下图

可以通过给input 添加onkeyup事件来实现

当输入值的键盘抬起时触发这个事件。this.value表示此输入框的值，/\D/g为正则表达式，用来匹配所有非数字字符；

此句功能为：将输入值为非数字的字符替换为空；

placeholder属性是当input框为空时显示的文字提示;

方法二：el-input-number

仅允许输入标准的数字值，可定义范围 

注：不能带 icon 

参考文章

https://www.jianshu.com/p/37ff53584c41

https://juejin.im/post/5ce77ebcf265da1b9612de0a