vue如何实现点击图片放大显示

在使用VUE开发时，可能会遇到这么一个需求，第一个界面会出现小图片，用户可以点击小图片进入查看放大的图片。这种需求最容易出现在公众号上，毕竟手机屏幕太小，在展现文字及图片时，图片显示的空间就有限了，这个时候如果你可以点击这个图片，图片能放大到全屏，是否就可以满足这个需求了呢？那以下就是使用VUE完成这个功能，以下代码可做参考

父组件：

子组件

源码如下：

父组件：

<template>
 

//imgBaseUrl为图片URL

//显示放大图片的组件
<showphoto>{photoVisible=false}">/<showphoto>
 

/<template>
export default {
 data() {
 return {
 photoVisible: false
 }
 },
 methods: {
 showBigImage(imgUrl) {//点击图片函数，点击后，把photoVisible设置成true
 if (imgUrl != "") {
 this.photoVisible = true;
 this.cacheInfo()
 }
 }
 }

子组件

<template>
 

 
 

/<template>

<style><br>.showPhoto<br> position:fixed<br> top:0<br> left:0<br> width: 100%<br> height: 100%<br> background: rgba(0,0,0,0.5)<br> z-index: 999<br> display: flex<br> .img<br> display: block<br> margin: auto 0<br> width 100%<br> text-align: center;<br>/<style>