图片全屏查看组件

前言

在一些博客网站上，经常能看到点击图片，然后图片全屏展示，再次点击屏幕，图片还原，现在就要完成这样的组件。

环境

• vue2.5
• webpack3.6
• less

效果如下

目录结构

src/index.vue
src/ImageFullscreen.vue

代码

<!-- ImageFullscreen.vue -->
/*
 * 图片全屏查看组件
 * @Author: wujiang
 */
<template>
  <section class="background" v-if="show" @click="onZoomIn">
    <img ref="img" :src="url" :height="height">
  </section>
</template>

<script>
export default {
  props: {
    url: {
      type: String,
      required: true
    },
    show: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      height: null
    }
  },
  watch: {
    show (n) {
      if (n) {
        this.init()
      }
    }
  },
  methods: {
    async init () {
      await this.$nextTick()
      const img = this.$refs.img
      this.height = img.naturalHeight
    },
    onZoomIn () {
      this.$emit('zoomin')
    }
  }
}
</script>

<style lang='less' scoped>
.background{
  position: fixed;
  cursor: pointer;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(55,55,55,.6);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}
img{
  cursor: zoom-out;
}
</style>

<!-- index.vue -->
/*
 * 图片全屏查看组件演示
 * @Author: wujiang
 */
<template>
  <section>
    <img :src="url" :height="height" @click="show = true">
    <image-fullscreen :url="url" :show="show" @zoomin="onZoomIn"></image-fullscreen>
  </section>
</template>

<script>
import ImageFullscreen from './ImageFullscreen'
export default {
  components: {
    ImageFullscreen
  },
  data () {
    return {
      url: 'https://img-blog.csdnimg.cn/20190222065159142.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcm1zd29ydGgyMDE2,size_16,color_FFFFFF,t_70',
      height: 100,
      show: false
    }
  },
  methods: {
    onZoomIn () {
      this.show = false
    }
  }
}
</script>

<style lang='less' scoped>
img{
  cursor: zoom-in;
}
</style>