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>