<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>
在列表中實現(xiàn)放大圖片使用的是 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 觸發(fā)父組件的自定義事件
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) {//點擊圖片函數(shù),點擊后,把photoVisible設(shè)置成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>