vue點擊單個圖片放大

子組件   BigImg.vue   實現放大圖片

<template>
  <!-- 過渡動畫 -->
  <transition name="fade">
    <div class="img-view" @click="bigImg">
      <!-- 遮罩層 -->
      <div class="img-layer"></div>
      <div class="img">
        <img :src="imgSrc">
      </div>
    </div>
  </transition>
</template>
<script>
  export default {
    props: ['imgSrc'],
    methods: {
      bigImg() {
        // 發送事件
        this.$emit('clickit')
      }
    }
  }
</script>
<style scoped>
  /*動畫*/
  .fade-enter-active,
  .fade-leave-active {
    transition: all .2s linear;
    transform: translate3D(0, 0, 0);
  }

  .fade-enter,
  .fade-leave-active {
    transform: translate3D(100%, 0, 0);
  }


  /* bigimg */

  .img-view {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /*遮罩層樣式*/
  .img-view .img-layer {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  /*不限制圖片大小，實現居中*/
  .img-view .img img {
    max-width: 100%;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1000;
  }
</style>

父組件   傳遞圖片地址給子組件

<template>
  <div>
    <div  class="img-show-mask">
      <img src='https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png' @click="clickImg($event)">

    </div>

    <!-- 放大圖片 -->
    <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
  </div>
</template>

<script>
  import BigImg from '@/global/BigImg'
  export default {
    data() {
      return {
        showImg: false,
        imgSrc: ''
      }
    },
    components: {
      'big-img': BigImg
    },
    methods: {
      clickImg(e) {
        this.showImg = true
        // 獲取當前圖片地址
        this.imgSrc = e.currentTarget.src
      },
      viewImg() {
        this.showImg = false
      }
    }
  }
</script>
<style>

  .img-show-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 500%;
  }
</style>