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

Vue中可以使用`@wheel`事件监听鼠标滚轮事件，然后通过计算滚轮滚动的距离来控制横向拖拽条的移动。

具体实现步骤如下：

1. 在需要添加滚轮控制的元素上绑定`@wheel`事件，例如：

<div class="container" @wheel="scrollHandler">
  <!-- 横向拖拽条 -->
  <div class="drag-handle"></div>
</div>

2. 在Vue实例中定义`scrollHandler`方法，并计算滚轮滚动的距离，例如：

export default {
  methods: {
    scrollHandler(event) {
      // 滚动的距离
      const delta = event.deltaX || event.deltaY;

      // 获取横向拖拽条元素
      const dragHandle = this.$el.querySelector('.drag-handle');

      // 计算拖拽条移动的距离
      const offset = delta > 0 ? 10 : -10;

      // 更新拖拽条的位置
      dragHandle.style.transform = `translateX(${offset}px)`;
    }
  }
};

上面的代码中，通过判断`delta`的正负来计算拖拽条移动的距离，然后更新拖拽条的位置。您可以根据实际情况进行调整。

需要注意的是，如果您需要支持不同浏览器中的滚轮事件，需要对`deltaX`和`deltaY`进行兼容处理。