最初代码:
<el-carousel height="320px">
<el-carousel-item v-for="item in imgs" :key="item">
<img class="carouselImg" :src="item">
</el-carousel-item>
</el-carousel>
const imgs = ref([])
onMounted(async() => {
const res = await scanBanner()
res.code == 200 && (imgs.value = res.data.images.split(',')) //返回数据为字符串,切割成数组
})
结果图片可以正常显示,鼠标点击也能正常切换,但无法自动轮播。怀疑是imgs初始值为空的原因。修改如下:
<el-carousel height="320px" v-if="imgs.length"> //加了if判断,轮播可自动播放
<el-carousel-item v-for="item in imgs" :key="item">
<img class="carouselImg" :src="item">
</el-carousel-item>
</el-carousel>