背景：
在使用vue框架+element组件的背景下，我们对图片的展示需要点击放大(单张)；如果是多张图片，要支持左右滑动查看多张图片(多张)。
单张图片放大，el-image图片组件，或者原生的img标签。
多张图片放大，el-image图片组件图片预览的自定义预览出效果。
这里也遇到了走马灯的图片的放大效果，给图片绑定了一个自定义的点击事件@click，用来解决走马灯的放大效果。
走马灯效果点击放大，Carousel走马灯，el-carousel。
走马灯单张放大实现了。。。
走马灯多张放大切换没有实现。。。
一、单张图片点击放大
el-image组件：
效果展示：
核心代码：
使用element组件，其中的 el-image图片组件
//组件属性绑定:preview-src-list属性
<el-image
v-if="item.photo"
class="img-style"
:src="BASEUrl + '/file/' + item.photo"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
:preview-src-list="[BASEUrl + '/file/' + item.photo]"
show-progress
:initial-index="4"
fit="cover"
/>接口数据：
//接口数据
[
{
"pid": 51,
"cname": "川蓬安渡0012",
"name": "川蓬安渡0012",
"mmsi": 415931252,
"carryPassengersNum": 15,
"status": 2,
"photo": "shipPhoto/9a80f083-32a7-41ee-b508-46c3cf385372.jpg",
},
{
"pid": 52,
"cname": "川蓬安渡0011",
"name": "川蓬安渡0011",
"mmsi": 415931259,
"carryPassengersNum": 15,
"status": 2,
"photo": "shipPhoto/4cee0bbb-1b91-494d-a546-fff012fa96be.jpg",
},
{
"pid": 78,
"cname": "测试渡船",
"name": "测试渡船",
"mmsi": 432781135,
"carryPassengersNum": 29,
"status": -1,
"photo": "shipPhoto/6c505716-d5e8-447d-9fe6-f41879a9a9a3.png",
},
{
"pid": 79,
"cname": "测试渡船1136",
"name": "测试渡船1136",
"mmsi": 432781136,
"carryPassengersNum": 39,
"status": -1,
"photo": "shipPhoto/2b3816e5-d2a8-4caf-80ab-a714f68a12d8.jpg",
}
]组件官网：点击跳转
el-carousel组件：
效果展示：
核心代码：
//自定义一个点击事件@click="handleClick(item)"
<template>
<el-carousel
:interval="5000"
arrow="always"
height="190px"
@change="imgChange"
trigger="click"
>
<el-carousel-item
v-for="(item, index) of state.repairData"
:key="index"
>
<div class="img-box">
<img
style="width: 100%; height: 100%"
:src="item.file"
alt="一张图"
@click="handleClick(item)"
/>
</div>
</el-carousel-item>
</el-carousel>
//图片预览，绝对布局相对于系统，所以放在走马灯标签外面
<el-image-viewer
v-if="showPreview"
:url-list="[state.imgSrc]"
show-progress
@close="showPreview = false"
/>
</template>遇见的问题：
问题描述：
图片放大的效果是放大在走马灯组件内部，没有放大到系统
问题展示：
图片放大的效果是放大在走马灯组件内部，没有放大到系统；解决办法：查看图片预览组件的position等位属性，查看父子标签的位置属性。
可以发现的是el-image-viewer标签是绝对定位，
解决办法：
总结：
二、多张图片放大
el-image组件：
官网链接：点击跳转
el-carousel组件：
组件官网：点击跳转
el-carousel组件本身并没有click点击的事件。。。
自定义click事件：
尝试自己用el-image-viewer组件绑定一个数组，实现效果不好，图片加载失败，经过多次排查哈错误原因：1、是否是图片跨域，图片本身不能加载成功；2、百度。发现可能是触发了vue的透传机制，目前解决不了
失败思路：
我想的是el-image-viewer组件可以绑定一个数组的话，我就给它绑定一个数组。但是出现了问题，图片也加载失败 ，
[Vue warn]: Extraneous non-props attributes (show-progress) were passed to component but could not be automatically inherited because component renders fragment or text or teleport root nodes.
[Vue warn]: 额外的非道具属性（显示进度）被传递给组件，但无法自动继承，因为组件渲染片段或文本或传送根节点。
很明显是你无意操作，无意触发了Vue3透传Attributes机制才没有出现报错，可当你的子组件中有多个根节点时，Vue使用透传Attributes机制也没有办法确定要在哪一个根节点继承属性时，就报出了上诉警告。
vue透传：点击跳转
写到这儿。。。多张图片放大的效果暂时不做了。。。
大概问题出在走马灯组件和图片组件之间的点击事件，用户鼠标点击的时候触发了vue3的透传