input[type=“number“]鼠标滚动时值跟着改变-Toy模板网

这篇具有很好参考价值的文章主要介绍了input[type=“number“]鼠标滚动时值跟着改变。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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>

注册全局自定义指令：文章来源地址https://www.toymoban.com/news/detail-510176.html

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;

到了这里，关于input[type=“number“]鼠标滚动时值跟着改变的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！