el-input type = numbe 鼠标滚轮一些设置

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

 如果想去掉上下箭头那么添加css即可

input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
 
input::-webkit-outer-spin-button{
  -webkit-appearance: none !important;
 
}
 
input[type="number"]{
  -moz-appearance: textfield;
 
}

现在就看到已经去除了

 居然发现还能出现负数，这怎么能忍

 

两种解决办法 

 1.阻止鼠标事件

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

2.设置最小值

<el-input v-model="amount" type="number"   :min ='0' >
</el-input>

如果想要鼠标滚轮事件控制小数位怎么办呢

<el-input-number  v-model="dialogForm.size" :precision="2" :step="0.1" :min="0" :max="10">
 
</el-input-number>

precision属性设置精准值（保留多少位小数），step设置步长（每次加减的基数），min，max最大最小值。