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"
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>到此这篇关于Vue实现点击图片放大显示功能的文章就介绍到这了,更多相关Vue点击图片放大内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！