Skip to content

<el-input> 输入框组件 ​

限定输入框组件仅能输入数字 ​

目前的最佳实践:

总有不同的需求的,这里简单罗列针对 el-input 组件输入数字的常见需求,以及出现的各种技术困境。

输入的过程中仅能输入数字 ​

仅能小数 ​

仅能整数 ​

仅能输入有意义的货币值 ​

在校验的时候提示用户不允许输入数字 ​

直接就不允许用户输入任何非数字 ​

不能输入小数点 ​

不能输入负号 ​

配置尽可能简单 ​

当前的最佳实践 ​

html
<el-input type="number" v-model.number="amount"></el-input>
scss
.el-input /deep/ input::-webkit-inner-spin-button {
	display: none !important;
}

尽管官方 issue 称,该组件不能使用 v-model 的 number 修饰符。但是作为 vue 本身就具有的 v-model 功能,我们应该要直接使用。

注意两个细节,我们同时使用:

  • v-model 的 number 修饰符。
  • <input> 标签原生的 type="number"。

使用该写法后,不容易出现混乱和错误。就目前来说是如此的。

贡献者

The avatar of contributor named as ruan-cat ruan-cat
The avatar of contributor named as 阮喵喵 阮喵喵

页面历史

最近更新