vue自定义指令实现阻止鼠标滚轮改变type="number"时的数值

在使用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>
发布了96 篇原创文章 · 获赞 15 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_35958891/article/details/103632924