vue实现点击图片放大显示功能

此文章转载于福建开源社区http://www.fjkysq.com/blog/130.html

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

 

父组件：

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

 

子组件