vue中实现点击图片放大显示

在我们使用vue开发的时候，有时候会遇到页面首先会出现一个小图片，然后点击之后会放大。这种现象最容易出现在手机使用上，当我们需要看这个图片的时候，点击就能放大看，不需要看的时候就不点击，如何满足这个需求呢。

请看代码

父组件：

template>
 <div >
//imgBaseUrl为图片URL
< img v-if="imgBaseUrl" style="width:100%" :src="imgBaseUrl" @click.self="showBigImage(imgBaseUrl)">
//显示放大图片的组件
<ShowPhoto :visible="photoVisible" :url="bigImgUrl" @closeClick="()=>{photoVisible=false}"></ShowPhoto>
 </div>
</template>
export default {
 data() {
 return {
 photoVisible: false
 }
 },
 methods: {
 showBigImage(imgUrl) {//点击图片函数，点击后，把photoVisible设置成true
 if (imgUrl != "") {
 this.photoVisible = true;
 this.cacheInfo()
 }
 }
 }

子组件：

<template>
 <div v-show="visible" @click="closeClick" class="showPhoto">
 < img class="img" :src="url" alt="图片加载失败">
 </div>
</template>
<script>
import {MessageBox} from 'mint-ui'
export default {
 props:{
 url: {
 type: String,
 default: ''
 },
 visible : {
 type: Boolean,
 default: false
 },
 },
 methods:{
 closeClick(){//子组件可以使用 $emit 触发父组件的自定义事件
 this.$emit('closeClick')
 }
 }
 }
</script>
<style lang="stylus" scoped>
.showPhoto
 position:fixed
 top:0
 left:0
 width: 100%
 height: 100%
 background: rgba(0,0,0,0.5)
 z-index: 999
 display: flex
 .img
 display: block
 margin: auto 0
 width 100%
 text-align: center;
</style>