实现Vue左右滚动组件

要实现一个列表元素超出后可以从左向右滚动且不换行，并且可以通过鼠标滚动或点击拖拽滚动的效果，可以使用Vue结合CSS和JavaScript来实现这个功能。一个常见的解决方案是使用自定义的Vue组件，并且使用CSS来控制滚动效果，再配合JavaScript实现鼠标拖拽。

下面是一个简单的示例，展示如何创建这样一个组件：

1. 安装依赖

你可能需要安装一个库来处理鼠标拖拽，比如 vuedraggable，但为了这个示例，我们将使用原生的JavaScript事件处理。

npm install vuedraggable

2. 创建Vue组件

HorizontalScroll.vue

<template>
  <div class="scroll-container" ref="container">
    <div class="scroll-content" ref="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HorizontalScroll',
  mounted() {
    const container = this.$refs.container;
    const content = this.$refs.content;

    let isDown = false;
    let startX;
    let scrollLeft;

    // Mouse events for dragging
    container.addEventListener('mousedown', (e) => {
      isDown = true;
      container.classList.add('active');
      startX = e.pageX - container.offsetLeft;
      scrollLeft = container.scrollLeft;
    });

    container.addEventListener('mouseleave', () => {
      isDown = false;
      container.classList.remove('active');
    });

    container.addEventListener('mouseup', () => {
      isDown = false;
      container.classList.remove('active');
    });

    container.addEventListener('mousemove', (e) => {
      if (!isDown) return;
      e.preventDefault();
      const x = e.pageX - container.offsetLeft;
      const walk = (x - startX) * 2; // scroll-fast
      container.scrollLeft = scrollLeft - walk;
    });

    // Mouse wheel for scrolling
    container.addEventListener('wheel', (e) => {
      e.preventDefault();
      container.scrollLeft += e.deltaY;
    });

    // Touch events for mobile
    container.addEventListener('touchstart', (e) => {
      isDown = true;
      startX = e.touches[0].pageX - container.offsetLeft;
      scrollLeft = container.scrollLeft;
    });

    container.addEventListener('touchend', () => {
      isDown = false;
    });

    container.addEventListener('touchmove', (e) => {
      if (!isDown) return;
      const x = e.touches[0].pageX - container.offsetLeft;
      const walk = (x - startX) * 2; // scroll-fast
      container.scrollLeft = scrollLeft - walk;
    });
  }
}
</script>

<style scoped>
.scroll-container {
  overflow: hidden;
  white-space: nowrap;
  cursor: grab;
  user-select: none; /* Prevent text selection */
}

.scroll-container.active {
  cursor: grabbing;
}

.scroll-content {
  display: inline-block;
}
</style>

3. 使用组件

App.vue

<template>
  <div id="app">
    <HorizontalScroll>
      <div class="item" v-for="n in 10" :key="n">Item {{ n }}</div>
    </HorizontalScroll>
  </div>
</template>

<script>
import HorizontalScroll from './components/HorizontalScroll.vue';

export default {
  name: 'App',
  components: {
    HorizontalScroll
  }
}
</script>

<style>
#app {
  text-align: center;
}

.item {
  display: inline-block;
  padding: 20px;
  background: #f1f1f1;
  margin: 10px;
}
</style>

解释

HorizontalScroll.vue:

这个组件包含一个 scroll-container 和一个 scroll-content，用于包裹插槽内容。
mounted 生命周期钩子中添加了鼠标事件监听器，用于实现拖拽滚动和鼠标滚动效果。
CSS 样式确保内容在容器内不换行，并实现了拖拽时的视觉效果（改变鼠标光标）。

App.vue:

使用 HorizontalScroll 组件，并通过插槽传入需要横向滚动的内容。
这种实现方式利用了 Vue 的组件化和插槽机制，使得组件可以复用，并且样式和行为都集中在一个地方，便于维护和扩展。

来源- 决心的博客