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

影子信息

已于 2025-03-27 17:30:12 修改

阅读量1.4k

点赞数 17

分类专栏： vue 文章标签： vue.js 图片

于 2025-03-24 17:32:50 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45024453/article/details/146424554

版权

vue 专栏收录该内容

38 篇文章

订阅专栏

背景：

在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-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]"
            :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-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]"
      @close="showPreview = false"
    />
</template>

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

//单张图片放大，且放大到全局
<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">
            <el-image
              v-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-item
          v-for="(item, index) of state.repairData"
          :key="index"
        >
          <div class="img-box">
            <el-image
              v-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>