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

背景：

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

图片单张放大，el-image图片组件，或者原生的img标签。previewSrcList =string['单个']

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

previewSrcList =string['多个','多个','多个','多个']

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

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

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

一、单张图片点击放大

el-image组件：

效果展示：

核心代码：

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

//组件属性绑定:preview-src-list属性
//:initial-index="index"绑定多张图片的索引值，点击哪张放大哪张<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]":preview-teleported="true":initial-index="index"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]"@close="showPreview = false"/>
</template>

核心代码，推荐这种写法：【推荐】

//单张图片放大，且放大到全局
<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"><el-imagev-if="item.file"class="img-style":src="BASEUrl + '/file/' + item.file"alt=""fit="cover":preview-src-list="BASEUrl + '/file/' + item.file"":preview-teleported="true":initial-index="index"/></div></el-carousel-item></el-carousel>

写到这儿。。。图片和走马灯单张图片放大的效果就实现了。。。

自定义一个点击放大的事件【不推荐】：

问题描述：

图片放大的效果是放大在走马灯组件内部，没有放大到系统

问题展示：

图片放大的效果是放大在走马灯组件内部，没有放大到系统；解决办法：查看图片预览组件的position等位属性，查看父子标签的位置属性。

可以发现的是el-image-viewer标签是绝对定位，然后排查最近父级的相对定位

解决办法：

二、多张图片放大

el-image组件：

官网链接：点击跳转

el-carousel组件：

组件官网：点击跳转

el-carousel组件本身并没有click点击的事件。。。

el-image组件，图片点击放大且相对于全局，可以实现。。。

实现效果如下：

核心代码：

//核心代码
//el-image图片的参数,绑定一个变量state.repairDataSrc可自定义
//:preview-src-list="state.repairDataSrc"
//:preview-teleported="true"
<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"><el-imagev-if="item.file"class="img-style":src="BASEUrl + '/file/' + item.file"alt=""fit="cover":preview-src-list="state.repairDataSrc":preview-teleported="true":initial-index="index"/></div></el-carousel-item></el-carousel>