elementUI + VUE el-input[type=number] 禁止滚动事件 隐藏上下箭头

1.隐藏上下箭头CSS样式

1 2 3 4 5 6 7 8

<style>     input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{         -webkit-appearance:textfield;     }         input[type="number"]{         -moz-appearance:textfield;     } </style>

 2.解决谷歌火狐input[type=number]滚动事件

1	<el-input type="number" v-model="inputNumber" @wheel.native.prevent="stopScrollFun($event)"></el-input>

3.js

1 2 3 4 5 6 7 8 9 10 11 12 13

stopScrollFun(evt) {     evt = evt || window.event;     if(evt.preventDefault) {         // Firefox         evt.preventDefault();         evt.stopPropagation();     } else {         // IE         evt.cancelBubble=true;         evt.returnValue = false;     }     return false; },

　　************@mousewheel.native.prevent 只在谷歌有效果，火狐没反应*******************