vue3 element-plus走马灯

以下是使用Vue3和Element Plus实现走马灯的示例代码：

<template>
  <div class="carousel">
    <el-carousel :interval="4000" arrow="always">
      <el-carousel-item v-for="(item, index) in list" :key="index">
        <img :src="item.imgUrl" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { ref } from 'vue';
import { ElCarousel, ElCarouselItem } from 'element-plus';

export default {
  components: {
    ElCarousel,
    ElCarouselItem,
  },
  setup() {
    const list = ref([
      { imgUrl: 'https://picsum.photos/800/300?random=1' },
      { imgUrl: 'https://picsum.photos/800/300?random=2' },
      { imgUrl: 'https://picsum.photos/800/300?random=3' },
    ]);

    return {
      list,
    };
  },
};
</script>

<style>
.carousel {
  width: 800px;
  margin: 0 auto;
}
</style>

在上面的代码中，我们使用了Vue3的Composition API来定义了一个`list`变量，它是一个响应式的数组，用于存储轮播图的图片地址。然后，我们使用了Element Plus的`ElCarousel`和`ElCarouselItem`组件来实现轮播图的效果。其中，`interval`属性用于设置轮播图的切换时间间隔，`arrow`属性用于设置箭头的显示方式。