vue横向鼠标滚轮滚动 怎么实现

你可以使用 Vue 的事件监听功能来实现横向鼠标滚轮滚动。

首先，在你的 Vue 组件中，使用 v-on 指令来监听 mousewheel 事件：

<template>
  <div v-on:mousewheel="handleMouseWheel">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    handleMouseWheel(event) {
      // 处理鼠标滚轮事件
    }
  }
}
</script>

然后，在事件处理函数 handleMouseWheel 中，你可以获取到鼠标滚轮事件对象 event，并使用 event.deltaX 属性来获取滚轮的滚动距离。

最后，你可以使用这个滚动距离来更新你的组件的状态，例如，对横向滚动位置进行偏移。

<template>
  <div v-on:mousewheel="handleMouseWheel" style="overflow-x: scroll;">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollX: 0
    }
  },
  methods: {
    handleMouseWheel(event) {
      this.scrollX += event.deltaX
    }
  }
}
</script>

这样，当用户在横向滚动时，就可以通过鼠标滚轮来控制组件的滚动位置了。