vue 点击放大，图片预览效果

背景：

在使用vue框架+element组件的背景下，我们对图片的展示需要点击放大(单张)；如果是多张图片，要支持左右滑动查看多张图片(多张)。

单张图片放大，el-image图片组件，或者原生的img标签。

多张图片放大，el-image图片组件图片预览的自定义预览出效果。

这里也遇到了走马灯的图片的放大效果，给图片绑定了一个自定义的点击事件@click，用来解决走马灯的放大效果。

走马灯效果点击放大，Carousel走马灯，el-carousel。

走马灯单张放大实现了。。。

走马灯多张放大切换没有实现。。。

一、单张图片点击放大

el-image组件：

效果展示：

核心代码：

使用element组件，其中的 el-image图片组件

//组件属性绑定:preview-src-list属性<el-imagev-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-itemv-for="(item, index) of state.repairData":key="index"><div class="img-box"><imgstyle="width: 100%; height: 100%":src="item.file"alt="一张图"@click="handleClick(item)"/></div></el-carousel-item></el-carousel>
//图片预览，绝对布局相对于系统，所以放在走马灯标签外面<el-image-viewerv-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机制也没有办法确定要在哪一个根节点继承属性时，就报出了上诉警告。