vue如何用鼠标滚轮控制横向拖拽条

在 Vue 中，可以使用 mousewheel 事件来监听鼠标滚轮事件，然后通过计算滚轮滚动的距离来改变横向拖拽条的位置。

具体实现步骤如下：

1. 在 template 中，使用 v-on 指令绑定 mousewheel 事件：

<div class="drag-bar" v-on:mousewheel="onMousewheel"></div>

2. 在 methods 中定义 onMousewheel 方法来处理鼠标滚轮事件：

methods: {
  onMousewheel: function(event) {
    // 计算滚轮滚动的距离
    var delta = event.deltaY || event.detail || event.wheelDelta;
    var distance = delta > 0 ? 20 : -20;

    // 获取横向拖拽条的位置
    var bar = document.querySelector('.drag-bar');
    var left = bar.offsetLeft;

    // 改变横向拖拽条的位置
    bar.style.left = (left + distance) + 'px';
  }
}

其中，event.deltaY、event.detail 和 event.wheelDelta 都是获取鼠标滚轮滚动距离的属性，distance 表示每次滚动的距离，根据滚轮滚动的方向来确定是向左还是向右滚动。获取横向拖拽条的位置可以使用 offsetLeft 属性，然后通过改变 left 属性来改变横向拖拽条的位置。