前端vue如何实现数字框中通过鼠标滚轮上下滚动增减数字

在 Vue 2 中,你可以通过监听数字框(通常是 <input><input type="number">)的鼠标滚轮事件来实现数字的增减。你可以使用原生的 JavaScript 事件监听器来实现这个功能。

以下是一个简单的示例,展示如何在 Vue 组件中实现这个功能:

1.创建一个 Vue 组件(或在现有的组件中添加相关逻辑)。

2.在模板中定义一个 <input type="number"> 元素。

3.在脚本部分,使用 mounted 钩子来添加鼠标滚轮事件监听器。

4.在事件处理函数中,根据滚轮的方向增减数字。

javascript 复制代码
<template>
  <div>
    <input
      type="number"
      v-model.number="number"
      @focus="inputFocused = true"
      @blur="inputFocused = false"
      ref="numberInput"
    />
    <p>当前数字: {{ number }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 0,
      inputFocused: false,
    };
  },
  mounted() {
    const inputElement = this.$refs.numberInput;

    inputElement.addEventListener('wheel', this.handleWheel, { passive: false });

    // 清理事件监听器
    this.$once('hook:beforeDestroy', () => {
      inputElement.removeEventListener('wheel', this.handleWheel);
    });
  },
  methods: {
    handleWheel(event) {
      // 如果输入框未聚焦,则不处理滚轮事件
      if (!this.inputFocused) return;

      // 阻止默认行为(如页面滚动)
      event.preventDefault();

      // 根据滚轮的方向增减数字
      if (event.deltaY < 0) {
        this.number += 1;
      } else {
        this.number -= 1;
      }

      // 确保数字不会超出可能的范围(例如,负数或非常大的正数)
      // 根据需要添加额外的逻辑
      // 例如:if (this.number < 0) this.number = 0;

      // 触发输入元素的 change 事件(如果需要)
      this.$emit('input', this.number);
    },
  },
};
</script>

<style scoped>
/* 添加一些样式(可选) */
input[type="number"] {
  width: 100px;
  padding: 5px;
  font-size: 16px;
  text-align: center;
}
</style>

解释

  1. 模板部分
    • 定义一个 <input type="number"> 元素,并使用 v-model.number 绑定到组件的 number 数据属性。
    • 使用 @focus@blur 事件来跟踪输入框的焦点状态。
    • 使用 ref="numberInput" 引用该输入框元素。
  2. 脚本部分
    • data 函数返回包含 numberinputFocused 的对象。
    • mounted 钩子中,使用 addEventListener 添加 wheel 事件监听器,并保存对 handleWheel 方法的引用。
    • beforeDestroy 钩子之前,使用 this.$once 移除事件监听器,以避免内存泄漏。
    • handleWheel 方法根据 event.deltaY 的值来增减 number 的值,并阻止默认行为(如页面滚动)。
  3. 样式部分
    • 添加一些简单的样式来美化输入框(可选)。

通过这种方式,你可以在 Vue 2 中实现通过鼠标滚轮在数字框中增减数字的功能。

相关推荐
恋猫de小郭16 分钟前
Flutter Widget IDE 预览新进展,开始推进落地发布
android·前端·flutter
jingling5551 小时前
【Vue3 实战】插槽封装与懒加载
前端·javascript·vue.js
武昌库里写JAVA2 小时前
39.剖析无处不在的数据结构
java·vue.js·spring boot·课程设计·宠物管理
Freedom风间6 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军7 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军7 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪7 小时前
SDK与API简单对比
前端·javascript·面试
runnerdancer7 小时前
微信小程序蓝牙通信开发之分包传输通信协议开发
前端
BillKu7 小时前
Vue3后代组件多祖先通讯设计方案
开发语言·javascript·ecmascript
山海上的风8 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui