基于vue 使用element UI框架实现走马灯图片高度自适应

最新推荐文章于 2024-07-12 10:00:20 发布

Guyal_

最新推荐文章于 2024-07-12 10:00:20 发布

阅读量2.9w

点赞数 3

分类专栏： VUE

本文链接：https://blog.csdn.net/Say_one/article/details/80900815

版权

本文介绍了如何在Vue项目中使用Element UI的Carousel组件，通过动态设置轮播图高度以实现图片高度自适应。通过监听窗口变化，获取图片高度并赋值给轮播图的高度，避免图片拉伸和空白条问题。

摘要由CSDN通过智能技术生成

走马灯代码结构走一遍（imgList数组在data中声明,此为本地数据）

data() {
    return{
        // 图片需要引入, 否则无法显示
        imgList: [
          {id: 0, idView: require('../assets/images/banner3.jpg')},
          {id: 1, name: '详情', idView: require('../assets/images/banner2.jpg')},
          {id: 2, name: '推荐', idView: require('../assets/images/banner1.jpg')}
        ]