input中type="number"类型去除上下箭头和禁止滚轮滚动改变数值

背景：

在vue做后台管理系统项目中，会有一些表单需要验证，比如只能输入数字。有一种解决方法就是使用type="number"。由此也遇到了下面两个问题：

1. 去除上下箭头

写上type="number"后输入框右边会有上下箭头，影响视觉体验。可以使用下面方法去除：

<style>
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
</style>

注意：在使用element-UI的vue项目中重写el_input样式要在全局中写，在scoped重谢这些样式不起作用！！

2. 禁止滚轮滚动改变数值

使用type="number"后滚动鼠标的滚轮可以改变数值。要想去掉这个效果可以添加@mousewheel.native.prevent事件，如下：

<el-input v-model.number="addManger.mobile" type="number" placeholder="请输入" @mousewheel.native.prevent />