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

最新推荐文章于 2024-04-29 16:20:12 发布

Blue__Summer

最新推荐文章于 2024-04-29 16:20:12 发布

阅读量514

点赞数 1

文章标签： vue.js html css

原文链接：https://blog.csdn.net/weixin_35958891/article/details/103632924

版权

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();
} )
}
} )
// 阻止数字输入鼠标滚轮改变数值
import "@/directive/stopNumberMousewheel";

<el-input v-model="test" v-stopNumberMousewheel type="number"></el-input>