vue遮罩层显示图片

这个可以封装成组件名字为img.vue

<template>
  <!-- 遮罩层 -->
  <div
  @click="bigImg"
    :class="imgSrc ? 'img-view-1' : 'img-view-2'"
    :style="{
      height: imgSrc ? 'calc(100% - 60px)' : '0%',
      width: imgSrc ? '100%' : '0%',
      'border-radius': imgSrc ? ' 0 0 0 0' : '5%',
      background: imgSrc ? 'rgba(0, 0, 0, 0.5)' : 'transparent',
    }"
  >
    <!-- 图片 -->
    <div class="bgDiv" v-if="imgSrc">
      <div class="imgDiv">
        <!-- 关闭按钮 -->
        <div class="image-view-close" v-show="imgSrc" @click="bigImg">
          <i class="el-icon-close"></i>
        </div>
        <img src="../../assets/image/2.jpg" :style="{ width: test + '%' }" />
        <div class="textDiv">1</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["imgSrc"],
  data() {
    return {
      test: 100,
    };
  },
  methods: {
    bigImg() {
      // 发送关闭事件
      this.$emit("clickit");
    },
  },
};
</script>
<style scoped>
/*遮罩层样式*/

.img-view-1 {
  position: fixed;
  top: 60px;
  left: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s;
}
.img-view-2 {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s;
}
.image-view-close {
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0px;
  right: 0;
  border-radius: 0 0 0 100%;
  cursor: pointer;
}
.image-view-close > i {
  font-size: 30px;
  color: #fff;
  margin: 10px 0 0 20px;
}
.image-view-close:hover {
  background: rgba(0, 0, 0, 0.5);
}
.image-view-slider {
  position: absolute;
  top: calc(50% - 260px);
  right: 40px;
}

.bgDiv {
  width: 500px;
}

.imgDiv {
  width: 100%;
  position: relative;
}

.textDiv {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
}


</style>

文件名 moadal.vue

  <Imgs @clickit="viewImg" :imgSrc="imgSrc"></Imgs>
    <div @click="clickImg">查看</div>
引入文件 import Imgs from "./components/img.vue";
注册组件   components: { Imgs},

方法  methods: {
    viewImg() {
      this.imgSrc = "";
    },

    clickImg() {
      // 获取当前图片地址 (我在组件的地址是写死的，你们可以改为动态的)
      this.imgSrc = "../assets/image/2.jpg";
    },
  },