首先要明确:
1、数字类型是一个int,有限定的位数,太大就失精了,因此,太长的数字用tel类型,短数字用Number。
2、输入框是给用户用的,可以限制用户输入,但是不能自动改用户已经输入的东西(一开始用正则做了个匹配小数点后几位的自动删除,用户体验不好)

遇到的问题:
1、使用Number的时候,会有上下箭头(不好看),并且滚轮可以滑动(正常页面就是滚轮滑的,不能一键多用),禁用这两个
2、输入(或复制黏贴进去)非数字的时候,虽然没输入,但是输入框中的光标闪动到左上角了,禁用这个

<style lang="scss" scoped>
    /deep/.el-input input::-webkit-outer-spin-button,
    /deep/.el-input input::-webkit-inner-spin-button {
        -webkit-appearance: none!important;
    }
    /deep/.el-input input[type="number"]{
        -moz-appearance: textfield;
    }
    /deep/.el-input .el-input__inner {
        line-height: 1px!important;
    }
</style>

3、输入太多会科学计数法,用html5原生属性oninput禁止输入,不进入vue的响应式,好用(注意这里用嵌套二元表达式)。
4、输入e,E,+,-,.,等数字符号,用@keydown.native禁用(注意这里用es6的箭头语法和includes语法)。

// 此例子是 允许输入小数点 整数最大3位 保留2位小数
<el-input v-model.number="xxxx" type="number" 
@keydown.native="e=>e.returnValue=(['e','E','-','+'].includes(e.key))?false:e.returnValue" 
oninput="value=value>=10**3?value.slice(0,3):value.indexOf('.')>0?value.slice(0,value.indexOf('.')+3):value"/>
// 2022-02-15更新:在更新了node版本之后居然发现不行了,问题出在οninput="value=value",的时候,不能输入小数点,反而会光标弹回最前。不知道为啥会这样,但是可以避免,代码如下:
<el-input v-model.number="ruleForm.rechargeUse[index]" type="number"
@keydown.native="e=>e.returnValue=(['e','E','-','+'].includes(e.key))?false:e.returnValue"
oninput="if(value>=10**3){value=value.slice(0,3)};if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}"/>
//就是取消了value=value这个赋值,改为不做任何处理。

如果是不用elmentui的innput。用html原生的input。仅需要把@keydown.native替换成onkeypress,onkeypress比@keydown.native更原生,所以写法有不同,写法如下

<input v-model="dataForm.number"  type="number"
onkeypress="return(['e','E','-','+'].includes(event.key))?false:event.key"
oninput="if(value>=10**3){value=value.slice(0,3)};if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+7)}" >
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐