element-ui 轮播图/幻灯片/走马灯，点击轮播图之后出来一个放大的轮播图对话框

本文链接：https://blog.youkuaiyun.com/Akatsuki233/article/details/94747819

本文介绍了如何在Element-UI中实现轮播图点击后弹出全屏显示的详细步骤，包括设置轮播图图片的100%等比例显示，以及自适应高度的技巧，参考了相关简书文章。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下为自适应宽高的，注意行内样式中间使用分号隔开的，不是逗号，否则会不生效。

外面的轮播图
<el-carousel height="150px" arrow="always" indicator-position="none" @change="carouselChange">
    <el-carousel-item v-for="(item, index) in event.eventTrackMediaList" :key="index">
        <div class="item" v-else @mouseover="isShowMask=true" @mouseout="isShowMask=false">
             <img src="../assets/images/image404.png" v-lazy="item.path" alt="事件图片">
              // 移动到轮播图上出现的遮罩
             <div class="mask" v-show="isShowMask">
                <img src="../assets/images/eventImgMouse.png" alt="" @click="viewDetail(item, index)">
            </div>
         </div>
     </el-carousel-item>
</el-carousel>

对话框中的轮播图
<el-carousel trigger="click" :autoplay="false" :initial-index="index1" ref="carousel">
      <el-carousel-item v-for="(item, index) in event.eventTrackMediaList" :key="index">
          <img :src="item.path" alt="图片预览" style="max-width: 100%;height: 100%" ref="carouselImg"/>
      </el-carousel-item>
</el-carousel>
data中：
index1: 0

methods中：
    // 当点击左右切换时，会触发 change 函数
    carouselChange () {
        console.log(11)
    }
    // 点击外面的轮播图时，对话框中的轮播图滚到相应的位置
    viewDetail (item, index) {
      this.index1 = index
      if (this.$refs.carousel) {
        this.$refs.carousel.setActiveItem(index)
      }
    }

效果图

如何让走马灯的图片100%等比例显示，要设置以下两个高度

<el-carousel indicator-position="outside" height="500px">
      <el-carousel-item v-for="item in previewData.img" :key="item">
           <img :src="item" alt="" style="height: 100%;">
      </el-carousel-item>
</el-carousel>

参考：https://www.jianshu.com/p/a4536a929795

图片自适应高度参考 https://www.jianshu.com/p/36e86bf21e86