element el-input type=number的时候隐藏上下箭头,并且禁止鼠标滚动改变值,禁止输入e
el-input,type = number 鼠标点击箭头增加减小数值,它的鼠标滚动也会 如图:
两种方法,第一种正常的写:
第一种方法(有bug,可以输入e,第二种可以解决):
// 全局css 加上以下代码,可以隐藏上下箭头
// 取消input的上下箭头
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
input::-webkit-outer-spin-button{
-webkit-appearance: none !important;
}
input[type="number"]{
-moz-appearance: textfield;
}
这时候又会发现一个问题,就是输入框我们鼠标滑动的的时候,它会改变input的值,如图:
解决方法:
//bug是可以输入e 第二种方法可以解决
<el-input v-model="amount" type="number" @mousewheel.native.prevent
@DOMMouseScroll.native.prevent>
</el-input>
第二种方法(完美解决,代码量也少,直接使用正则即可):
// 注意type类型是text
<el-input v-model="amount" type="text" @input="allNumber(amount)" >
</el-input>
<script>
export default {
data() {
return {
amount: '',
}
},
methods: {
allNumber(value) {
value = value.replace(/[^\d]/g,""); //只能输入数字
this.amount = value //注意这里是string,你要数字类型记得自己转一下
console.log(this.amount)
}
}
};
</script>