elment中走马灯与满屏图片实现

1、原基础操作

限制：被走马灯和外部宽度限制，导致图片无法被放大，被限制在走马灯所在的宽度内
思路：
1、监听图片的点击和关闭事件
2、图片放大时，去掉走马灯内的相对定位，宽度，动画限制，并还原底部走马灯的样式

//vue
 <div class="right-img-content" :class="{isFullImages:isFullImage,onFullImages:!isFullImage}">
     <el-carousel v-show="imageValue.dataLeftSource" ref="carouselRef" arrow="always" :autoplay="false"
                  indicator-position="none" @change="carouselChange">
         <el-carousel-item v-for="(item, index) in imageValue.dataLeftSource" :key="index" :name="index+''">
             <div class="image-wrap">
                 <el-image 
                 :src="item.imgSrcs" 
                 fit="cover" 
                 :preview-src-list="imageValue.imgMpList" 
                 :append-to-body="true"
                 :z-index="9999"
                 class="image_item" 
                 @click="toClickImg()">
                     <template #placeholder>
                         <el-image :src="Icons['noimg']"></el-image>
                     </template>
                     <template #error>
                         <el-image :src="Icons['noimg']"></el-image>
                     </template>
                 </el-image>
             </div>
         </el-carousel-item>
     </el-carousel>
 </div>
 
 
 //ts
  //预览图片
  function toClickImg(){
        isFullImage.value=true;
        let timerss= setTimeout(() => {//获取关闭图片按钮事件
            clearTimeout(timerss);
            nextTick(()=>{
                let documentClose=document.querySelector(".el-image-viewer__close");
                documentClose?.addEventListener("click",()=>{
                    isFullImage.value=false;
                });
            });
        }, 1);
    }


//css
.right-img-content{
	width:600px;
}
.isFullImages{
        z-index: 101;
        :deep(.el-carousel){
            position:unset;
        }
        :deep(.el-carousel__container){
            position:unset;
            .el-carousel__item:nth-child(n) .image-wrap{
                margin-top: 80px;
                margin-left: 32%;
            }
            .el-carousel__item.is-active .image-wrap{
                margin-left: unset;
            }
	        .el-carousel__item{
	            transform:unset !important;
	        }
        }
        :deep(.el-carousel__arrow){
            display: none;
        }
    }
    .onFullImages{
        :deep(.el-carousel){
            position: relative;
        }
        :deep(.el-carousel__container){
            position: relative;
	        .el-carousel__item{
	            transform:translateX(0px) scale(1) !important;
	        }
        }
        .image-wrap{
            margin-top: unset;
            margin-left: unset;
        }
        :deep(.el-carousel__arrow){
            display: unset;
        }
    }