当前位置：首页 > news >正文

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

news 来源：原创 2025/4/29 1:36:55

背景：

在使用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机制也没有办法确定要在哪一个根节点继承属性时，就报出了上诉警告。