首先，确保你已经引入了 Element-React 的样式和脚本。可以通过以下方式之一来引入：
1. 使用 CDN：
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入脚本 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
2. 使用 npm 安装：
npm install element-ui
然后在你的 Vue 项目中引入并使用 Carousel 组件：
<template>
<div>
<el-carousel :interval="4000" type="card">
<el-carousel-item v-for="item in carouselItems" :key="item.id">
<img :src="item.imageUrl" alt="轮播图">
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
import { ElCarousel, ElCarouselItem } from 'element-ui';
export default {
data() {
return {
carouselItems: [
{ id: 1, imageUrl: 'https://example.com/image1.jpg' },
{ id: 2, imageUrl: 'https://example.com/image2.jpg' },
{ id: 3, imageUrl: 'https://example.com/image3.jpg' },
],
};
},
components: {
ElCarousel,
ElCarouselItem,
},
};
</script>
在上面的例子中，我们使用了 ElCarousel 和 ElCarouselItem 组件来创建走马灯。通过在 el-carousel 中使用 el-carousel-item 来定义每个轮播项的内容，可以在每个轮播项中放置图片或其他内容。
在这个例子中，我们通过v-for指令遍历 carouselItems 数组，显示每个轮播项的图片。interval 属性用于设置轮播间隔时间，单位为毫秒。type 属性设置轮播类型，这里使用的是 card 类型。
你可以根据实际需求，调整轮播的样式、内容和配置项。
转载请注明出处：http://www.zyzy.cn/article/detail/5637/Element-React