设置el-input的type为number:
<el-input type="number" v-model="value" class="inputPadding"/><span> 元</span>
出现的问题如下:
解决问题一:输入中文时光标上移(解决后又出现一个新的问题,如下图所示)
/deep/ .el-input__inner {
line-height: 1px !important;
}
解决问题二:上下箭头离右侧有padding距离
.inputPadding {
width: 50%; //设置el-input框的宽度
/deep/ .el-input__inner {
padding-right: 0;
}
}
解决问题三:上下箭头的line-height也变了,那就去掉上下箭头
/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;
}
禁止键盘上下键事件
mounted() {
this.showkey();
},
// el-input type=number时点击键盘上下键可以改变input中的值,这个方法是禁止改变
showkey() {
document.onkeydown = function() {
if (window.event.keyCode === 38 || window.event.keyCode === 40) {
window.event.returnValue = false;
}
};
},
只能输入正整数
<el-input v-model="form.number" type="number" oninput="value = value.replace(/[^\d]/g, '')"></el-input>