Vue 点击图片放大显示功能

最新推荐文章于 2025-05-29 10:48:25 发布

早起的年轻人

最新推荐文章于 2025-05-29 10:48:25 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端日常开发 Vue开发中的点点滴滴文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/zl18603543572/article/details/129838846

Vue开发中的点点滴滴同时被 2 个专栏收录

31 篇文章

订阅专栏

前端日常开发

21 篇文章

订阅专栏

文章介绍了在Vue.js项目中使用ElementUI的el-popover组件和自定义大图组件(big-img.vue)来实现列表中图片的预览功能。方法一是利用el-popover的hover触发显示大图；方法二是创建一个通用的大图显示组件，通过父子组件通信实现图片放大效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 方式一：列表中感应鼠标显示大图

在这里插入图片描述
我管理后台使用的是 element , 列表使用的是 el-tabe

  <el-table-column
    prop="identifImg"
    header-align="center"
    align="center"
    label="证件照"
    width="100">
    <template slot-scope="scope">
      <el-popover
        placement="top-start"
        trigger="hover">
        <div class="row_reserve"><img class="big-img" :src="scope.row.identifImg"/></div>
        <div slot="reference"><img class="td-img" :src="scope.row.identifImg"/></div>
      </el-popover>
    </template>
  </el-table-column>

在列表中实现放大图片使用的是 el-popover 使用说明文档
在这里插入图片描述

2 方式二：自定义通用组件实现

首先是自定义大图显示的通用组件：big-img.vue

<template>
  <div v-show="visible" @click="closeClick" class="showPhoto">
    <img class="img" :src="url" alt="图片加载失败" />
  </div>
</template>

<script>
  export default {
    props: {
      url: {
        type: String,
        default: "",
      },
      visible: {
        type: Boolean,
        default: false,
      },
    },
    methods: {
      closeClick() {
        //子组件可以使用 $emit 触发父组件的自定义事件
        this.$emit("closeClick");
      },
    },
  };
</script>
<style lang="css" scoped>
  .showPhoto {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .showPhoto .img {
    display: block;
    margin: auto 0;
    max-width: 20%;
    text-align: center;
  }
</style>

然后在使用到文件中引入组件并注册组件

<script>

  import BigImg from "../components/big-img"

  export default {
    data() {
     
      return {
        photoVisible: false,
        bigImgUrl: ""
      };
    },
    components:{
      BigImg
    },
    methods: {
      
      showBigImage(e) {//点击图片函数，点击后，把photoVisible设置成true
        if (e != "") {
          this.photoVisible = true;
          this.bigImgUrl = e;
        }
      },
  };
</script>

然后在图片 img 处使用

<template>
  <div>
	<!-- imgBaseUrl为图片URL-->
	<img v-if="imgBaseUrl" 
	     style="width:100%" 
	     :src="imgBaseUrl"   
	     @click.self="showBigImage(imgBaseUrl)">

	<img
	    @click.self="showBigImage($event)"
	    src="~@/assets/img/liaojiewt/202141.png"
	    alt=""
	/>
	<!--显示放大图片的组件-->
	<BigImg :visible="photoVisible" :url="bigImgUrl" @closeClick="()=>{photoVisible=false}"></BigImg>
  </div>
</template>