ElementUI之走马灯（轮播图）

最新推荐文章于 2025-03-31 23:01:53 发布

永不满足的求知者

最新推荐文章于 2025-03-31 23:01:53 发布

阅读量7.9k

点赞数 3

分类专栏：前端 Element Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_41154522/article/details/104588249

版权

前端同时被 3 个专栏收录

82 篇文章

订阅专栏

Vue

64 篇文章

订阅专栏

Element

29 篇文章

订阅专栏

在这里插入图片描述

走马灯（轮播图）实现

<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>

在data中定义 bannerH：300 给个默认值

设置走马灯高度

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

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

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

走马灯图片数据

//走马灯图片列表
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')
      }
  ],