Vue3 写一个海报轮播图

以下是一个基本的 Vue3 海报轮播图示例：

template:

<template>
  <div class="slider-container">
    <div class="slider-wrapper" :style="{ transform: 'translateX(' + (-index * 100) + '%)' }">
      <div class="slider-item" v-for="(item, key) in bannerList" :key="key">
        <img :src="item.imgUrl" alt="">
      </div>
    </div>
    <div class="slider-dots">
      <span class="dot" v-for="(item, key) in bannerList" :key="key" :class="{ active: key === index }" @click="handleDotClick(key)"></span>
    </div>
  </div>
</template>

script:

<script>
import { ref } from 'vue';

export default {
  name: 'Slider',
  props: {
    bannerList: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    const index = ref(0);
    const timer = ref(null);

    const handleDotClick = (key) => {
      index.value = key;
    };

    const autoPlay = () => {
      timer.value = setInterval(() => {
        index.value = (index.value + 1) % props.bannerList.length;
      }, 3000);
    };

    autoPlay();

    return {
      index,
      timer,
      handleDotClick
    };
  }
};
</script>

style:

<style>
.slider-container {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.slider-wrapper {
  display: flex;
  transition: transform .5s ease-in-out;
}

.slider-item {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slider-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.slider-dots .dot {
  display: block;
  width: 12px;
  height: 12px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity .3s ease-in-out;
}

.slider-dots .dot.active {
  opacity: 1;
}
</style>

使用：

<template>
  <Slider :bannerList="bannerList" />
</template>