pc端用vue手写轮播组件

你可以使用 Vue.js 来手写一个 PC 端的轮播组件。下面是一个简单的示例代码：

<template>
  <div class="carousel">
    <div class="carousel-inner">
      <div class="carousel-item" v-for="(item, index) in items" :key="index">
        <img :src="item.imgUrl" alt="carousel-item">
      </div>
    </div>
    <button class="carousel-prev" @click="prevItem">&lt;</button>
    <button class="carousel-next" @click="nextItem">&gt;</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { imgUrl: 'image1.jpg' },
        { imgUrl: 'image2.jpg' },
        { imgUrl: 'image3.jpg' },
      ],
      currentItemIndex: 0,
    };
  },
  methods: {
    prevItem() {
      if (this.currentItemIndex > 0) {
        this.currentItemIndex--;
      } else {
        this.currentItemIndex = this.items.length - 1;
      }
    },
    nextItem() {
      if (this.currentItemIndex < this.items.length - 1) {
        this.currentItemIndex++;
      } else {
        this.currentItemIndex = 0;
      }
    },
  },
};
</script>

<style scoped>
.carousel {
  position: relative;
}

.carousel-inner {
  display: flex;
  overflow: hidden;
}

.carousel-item {
  flex: 0 0 100%;
}

.carousel-item img {
  width: 100%;
}

.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  padding: 10px;
}

.carousel-prev {
  left: 10px;
}

.carousel-next {
  right: 10px;
}
</style>

上述代码中，使用了一个数组 `items` 存储轮播项的信息，每个项包含一个图片的 URL 地址。`currentItemIndex` 用于追踪当前显示的轮播项的索引。通过点击“上一项”和“下一项”按钮，可以切换轮播项。

你可以根据实际需求进行样式和功能的定制。希望这个示例对你有所帮助！