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>