ElementUI之走马灯（轮播图）

走马灯（轮播图）实现

<el-carousel :interval="4000" type="card" :height="bannerH+'px'" style="margin-top: 15px">
    <el-carousel-item v-for="item in imgData" :key="imgData.value">
   		<!--走马灯中也可以添加一些文字信息-->
        <!-- <p align="center" style="font-size: x-large;font-family: 华文新魏;color: #f56c6c">{{item.txt}}</p>-->
        <img ref="imgHeight" :src="item.src" width="100%" height="100%" object-fit="cover">
    </el-carousel-item>
</el-carousel>

1. 在data中定义 bannerH：300 给个默认值
2. 设置走马灯高度

   //设置走马灯高度
   setBannerH() {
       this.bannerH = document.body.clientWidth / 4
   },
   

3. 在mounted中执行 setBannerH 方法，在页面加载时动态设置高度

   window.addEventListener('resize', () => {
     this.setBannerH()
   }, false);
   

4. 走马灯图片数据

   //走马灯图片列表
   imgData: [
         {
             src: require('~/assets/images/car/car01.jpg')
         }, {
             src: require('~/assets/images/car/car02.jpg')
         }, {
             src: require('~/assets/images/car/car03.jpg')
         }, {
             src: require('~/assets/images/car/car07.jpg')
         }, {
             src: require('~/assets/images/car/car04.jpg')
         }
     ],