Vue如何实现点击图片放大显示功能

这篇文章主要讲解了“Vue如何实现点击图片放大显示功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue如何实现点击图片放大显示功能”吧！

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

我管理后台使用的是 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" :class="lazy" data-src="scope.row.identifImg"/></div>        <div slot="reference"><img class="td-img" :class="lazy" data-src="scope.row.identifImg"/></div>      </el-popover>    </template>  </el-table-column>

在列表中实现放大图片使用的是 el-popover 使用说明文档

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

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

<template>  <div v-show="visible" @click="closeClick" class="showPhoto">    <img class="img" :class="lazy" data-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>

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

  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;        }      },  };

然后在图片 img 处使用

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

感谢各位的阅读，以上就是“Vue如何实现点击图片放大显示功能”的内容了，经过本文的学习后，相信大家对Vue如何实现点击图片放大显示功能这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！