vue3+ts实现div里鼠标横向滚动

在Vue 3 + TypeScript中实现一个div内的鼠标横向滚动功能，你可以利用`vue-scrollbar`这个第三方库，它提供了一个易于使用的API来添加滚动条组件，并支持自定义滚动事件处理。

首先，你需要安装依赖：

npm install vue-scrollbar --save

然后，在组件中导入并使用它：

import { ScrollView } from 'vue-scrollbar.vue';

export default {
  components: {
    ScrollView,
  },
  setup() {
    return () => ({
      // 定义滚动容器的样式和选项
      scrollOptions: {
        suppressScrollX: false, // 允许水平滚动
        wheelSpeed: 10, // 滚轮滚动速度
      },
      mounted() {
        const container = document.getElementById('yourDivId') as HTMLElement; // 获取div元素
        if (container) {
          new ScrollView({
            ref: container,
            options: this.scrollOptions,
          });
          container.addEventListener('scroll', (event) => {
            console.log('Horizontal scroll event:', event);
            // 这里可以处理滚动事件，比如获取当前滚动位置等
          });
        }
      },
    });
  },
}

确保在HTML模板中包含相应的div元素，并给它一个唯一的id:

<div id="yourDivId" class="scrollable-content">
  <!-- 你的内容 -->
</div>

在这个例子中，当你在div内滚动鼠标时，会触发`scroll`事件，你可以在事件处理器中根据需要定制行为。