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

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

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

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

        2.在模板中定义一个  元素。

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

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

解释

1. 模板部分：
   • 定义一个  元素，并使用 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 中实现通过鼠标滚轮在数字框中增减数字的功能。