在不使用Image组件
的时候,可以用el-image-viewer组件
实现大图预览。
<!-- 大图预览 -->
<el-image-viewer
v-if="showBig"
:on-close="closeViewer"
:url-list="showBigImgList"
/>
// 仅做示例
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
name: "buildingDetailCommon",
components:{ElImageViewer},
data(){
return {
huxingtuImgs:[],
showBig:false,
showBigImgList:[]
}
},
methods:{
yulanImgList(attr){
this.huxingtuImgs = this.building.huxingtu.map((a)=>{ return a.shortImgUrl});
this.showBigImgList = this[attr];
this.showBig = true;
},
closeViewer(){
this.showBig = false;
}
}
}
</script>
/* 大图预览的关闭图标 改为大一点的白色 */
.el-image-viewer__btn.el-image-viewer__close {
color: #FFF;
opacity: unset;
top: 50px;
right: 50px;
width: 50px;
height: 50px;
font-size: 50px;
}