在使用input时如果type=“number”,滚动鼠标滚轮会改变输入框的数值容易造成误操作
自定义指令
import Vue from 'vue'
// 阻止type="number"鼠标滚动改变数值
Vue.directive( 'stopNumberMousewheel', {
inserted: function ( el ) {
const ele = el.tagName === 'INPUT' ? el : el.querySelector( 'input' )
ele.addEventListener( "mousewheel", () => {
ele.blur();
} )
}
} )
main.js中全局引入
// 阻止数字输入鼠标滚轮改变数值
import "@/directive/stopNumberMousewheel";
使用
<el-input v-model="test" v-stopNumberMousewheel type="number"></el-input>