Vue 点击图片放大显示功能

红太狼 2023-10-08 22:49 42阅读 0赞

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

![在这里插入图片描述][ea4b3a1f831349cea22500b85547d702.png]  
我管理后台使用的是 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 使用说明文档][el-popover]  
![在这里插入图片描述][ce42a1cdb0c04e9c8469c2bf9f6bd71d.png]

##### 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>

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

然后在图片 img 处使用

<template>
      <div>
    	
    	<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>

完毕

[ea4b3a1f831349cea22500b85547d702.png]: https://img-blog.csdnimg.cn/ea4b3a1f831349cea22500b85547d702.png
[el-popover]: https://element.eleme.cn/#/zh-CN/component/popover
[ce42a1cdb0c04e9c8469c2bf9f6bd71d.png]: https://img-blog.csdnimg.cn/ce42a1cdb0c04e9c8469c2bf9f6bd71d.png