element el-input type=number的时候隐藏上下箭头，并且禁止鼠标滚动改变值，禁止输入e

项目经常要写到el-input，type = number,这个时候遇到的箭头就很烦，它的鼠标滚动还会改变值就更烦了，如图：

两种方法，第一种正常的写： 

解决方法：

// 全局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的值，这谁顶得住啊，如图：

解决方法：

<el-input v-model="amount" type="number"   @mousewheel.native.prevent
      @DOMMouseScroll.native.prevent>
</el-input>

添加上面的代码之后，无论你鼠标怎么滑动都不会改变值了(bug:能输入e)

问题解决：

效果图：

 第二种方法：正则表达式,还能禁止输入e，这个代码少，本人觉得更好用，不BB了，直接上代码

// 注意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>

效果图：

 OK，问题解决，今晚可以加鸡腿了