这篇文章主要讲解了“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" :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 使用说明文档
方式二：自定义通用组件实现
首先是自定义大图显示的通用组件：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>然后在使用到文件中 引入组件并注册组件
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" :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>感谢各位的阅读，以上就是“Vue如何实现点击图片放大显示功能”的内容了，经过本文的学习后，相信大家对Vue如何实现点击图片放大显示功能这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
