input[type=“number“]鼠标滚动时值跟着改变

鼠标滚动时值跟着改变"/>

input[type=“number“]鼠标滚动时值跟着改变

原因：table里面嵌入input[type="number"]输入框，鼠标滚动时值跟着改变

需求：鼠标滚动时，不改变input值，只页面滚动

思路：

* 1.监听mousewheel事件；

* 2.获取input输入框元素；

* 3.当监听到鼠标滚动事件时，设置input元素失去光标

使用：

*（1）在DOM上加上v-stopMousewheel即可

        <el-input type="number" v-stopMousewheel><el-input>

* (2）也可在DOM上绑定@mousewheel.prevent;@DOMMouseScroll.prevent来阻止type="number"鼠标滚动改变数值

缺点：当input获取光标时，鼠标滚动，整个页面时不滚动的，只有input失去光标之后页面才会滚动；当页面内容多，出现滚动条时，用户体验不好

页面：

<template><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column label="Price" width="180"><template #price="scope"><el-input-number v-model="scope.row.price" v-stopMousewheel ></el-input-number></template></el-table-column><el-table-column prop="address" label="Address" /></el-table>
</template>

ts:

<script lang="ts" setup>
const tableData = [{date: '2016-05-03',name: 'Tom',price: 10,address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',price: 10,address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',price: 5,address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',price: 9,address: 'No. 189, Grove St, Los Angeles',},
]
</script>

注册全局自定义指令：

import type {Directive} from 'vue';
const stopMousewheel:Directive = {updated:function (el:HTMLElement) {el.addEventListener('mousewheel',() => {const elem:any = el.tagName === 'INPUT' ? el : el.querySelector('input');elem.blur();})}
};
export default stopMousewheel;