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>