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()
    }
  }
  }

 

子组件






 

你可能感兴趣的:(前端技术,vue,图片放大)