vue pc中横向数组遍历，数据超出宽度时 可滑动 鼠标可拖动左右滑动 不展示滚动条

在Vue.js中，为了实现PC端的横向数组遍历，当数据宽度超过屏幕宽度时能够通过滚动条滑动，同时鼠标可以实现拖动效果并隐藏滚动条，你可以采用以下步骤：

1. 使用`v-for`指令遍历数据，将每个元素渲染成一个宽度固定的卡片，比如`<div>`元素。

<div class="carousel-container" :style="{ transform: translateXTranslate }">
  <template v-for="(item, index) in items" :key="index">
    <div :class="{'slide': true, 'hidden-scrollbar': !showScrollbar}" :style="{ width: itemWidth + 'px', left: slidePosition(index * itemWidth) + 'px' }">{{ item }}</div>
  </template>
</div>

这里假设`items`是你要遍历的数据数组，`itemWidth`是卡片的固定宽度，`translateXTranslate`是一个计算出来的基于当前滑动位置的CSS `transform`值。

2. 设置`.carousel-container`的样式，使其可以水平滑动，并隐藏滚动条。使用`:style`绑定动态样式，`hidden-scrollbar`类用于控制是否显示滚动条。当需要隐藏滚动条时，设置`overflow-y: hidden;`.

.carousel-container {
  overflow-x: auto;
  white-space: nowrap;
  position: relative;
}

.slide {
  display: inline-block;
  /* 其他样式 */
}

.hidden-scrollbar::-webkit-scrollbar {
  width: 0;
}
.hidden-scrollbar {
  -ms-overflow-style: none; /* IE 和 Edge */
  scrollbar-width: none;
}

3. 添加鼠标移动事件监听器，计算鼠标的位置并在容器上应用相应的滑动。这可以通过JavaScript实现，例如使用`mousemove`事件和`clientX`属性：

data() {
  return {
    showScrollbar: false,
    slidePosition: (position) => position,
    // ...
  }
},
methods: {
  handleMouseMove(e) {
    const newX = e.clientX - this.containerOffset.left;
    if (newX > this.containerWidth) {
      // 左滑到末尾
      this.slidePosition = (this.slides.length - 1) * this.itemWidth;
    } else if (newX < 0) {
      // 右滑到开头
      this.slidePosition = 0;
    }
    // 更新视图
    this.translateXTranslate = `translateX(${this.slidePosition}px)`;
  },
  // ...
},
mounted() {
  this.container = document.querySelector('.carousel-container');
  this.containerOffset = this.container.getBoundingClientRect();
  this.container.addEventListener('mousemove', this.handleMouseMove);
  // 添加其他处理滚动事件的逻辑
}

记得在适当的地方添加`mounted`生命周期钩子，以便在组件挂载后初始化滑动和事件监听。