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

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

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

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

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

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

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

<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 函数返回包含 number 和 inputFocused 的对象。
   • 在 mounted 钩子中，使用 addEventListener 添加 wheel 事件监听器，并保存对 handleWheel 方法的引用。
   • 在 beforeDestroy 钩子之前，使用 this.$once 移除事件监听器，以避免内存泄漏。
   • handleWheel 方法根据 event.deltaY 的值来增减 number 的值，并阻止默认行为（如页面滚动）。
3. 样式部分 ：
   • 添加一些简单的样式来美化输入框（可选）。

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