Carousel 跑马灯

首先，打开其官网-跑马灯案例

跑马灯代码：

	<el-carousel :interval="5000" arrow="always"><el-carousel-item v-for="item in 4" :key="item"><h3 text="2xl" justify="center">{{ item }}</h3></el-carousel-item></el-carousel>

首页跑马灯demo

tips: vue3不再使用require函数导入，而是使用支持es6的import函数去导入

<scripe setup>import image1 from '@/assets/images/mrhb.jpg'import image2 from '@/assets/images/mrlm.jpg'import image3 from '@/assets/images/mrxtt.jpg'import image4 from '@/assets/images/zly.jpg'const bgList = ref([{url:image1},{url:image2},{url:image3},{url:image4}])
</scripe><template><el-carousel :interval="4000" indicator-position="outside" type="card"  height="450px" style="line-height: 450px;"><el-carousel-item v-for="item in bgList" :key="item"><!-- <h3 text="2xl" justify="center">{{ item.url }}</h3> --><el-image :src=" item.url " style="height: 450px;width: 100%;"></el-image></el-carousel-item></el-carousel>
<template>

我的踩坑记录就是明明，网页的资源文件已经渲染，但是无法看到图片，然后查了半天，最后发现是h3标签的那块儿内容占了位置将我的图片顶了下去，QAQ
(ಥ﹏ಥ)，以后一定要相信自己的想法，坚持自己没错啊！！！