阻止鼠标滚动改变input(type=number)的值事件

一直被这个问题困扰，网上找的很多阻止鼠标滚轮事件的方法，但是都不合适，不仅阻止了滚轮改变数值，也阻止了表单的滚动，用户体验很不好。今天发现一个大神（@九段刀客）的vue自定义指令实现阻止鼠标滚轮改变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>