用element-plus框架插入轮播图组件宽度100高度600 滑动可切换轮播图生成vue3格式 script setup代码要求所有方法或箭头函数都用function定义要求所有变量为ref响应式无需任何文字说明只要源码即可
<template>
<div class="slider-container">
<el-carousel :interval="3000" arrow="always" indicator-position="outside">
<el-carousel-item v-for="item in sliderList" :key="item.id">
<img :src="item.imgUrl" alt="">
</el-carousel-item>
</el-carousel>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { ElCarousel, ElCarouselItem } from 'element-plus';
const sliderList = ref([
{ id: 1, imgUrl: 'https://picsum.photos/800/600?random=1' },
{ id: 2, imgUrl: 'https://picsum.photos/800/600?random=2' },
{ id: 3, imgUrl: 'https://picsum.photos/800/600?random=3' },
]);
function getSliderList() {
return sliderList;
}
export default {
components: {
ElCarousel,
ElCarouselItem,
},
setup() {
return {
sliderList,
getSliderList,
};
},
};
</script>
<style lang="scss" scoped>
.slider-container {
width: 100%;
height: 600px;
}
</style>
原文地址: https://www.cveoy.top/t/topic/bbGd 著作权归作者所有。请勿转载和采集!