vue 手写移动端放大图

<template>
  <div @click="closeimg" :class="{'active': isBig}" id="bigimg">
    <div v-if="hasButton" @click.stop="deleteimg" class="tool-button">
      <img src="../../../assets/img/shanchulajitong.png" alt>
    </div>
    <img class="imgbig" :src="myUrl" alt>
  </div>
</template>
<script>
export default {
  name: "Bigimg",
  props: {
    url: {
      type: String,
      default: "./logo.png"
    },
    isBig: {
      type: Boolean,
      default: false
    },
    index: {
      type: Number,
      default: 0
    },
    hasButton: {
      type: Boolean,
      default: false
    }
  },
  created() {
    this.myUrl = this.url;
  },
  watch: {
    url() {
      this.myUrl = this.url;
    },
    index() {
      this.myIndex = this.index;
    },
    isBig() {
      if (this.isBig) {
        // 显示
        document.body.style.overflow = "hidden";
        document.body.style.height = "100vh";
        var bodyEl = document.body;
        top1 = window.scrollY;
        bodyEl.style.position = "fixed";
        bodyEl.style.top = -top1 + "px";
      } else {
        // 隐藏
        document.body.style.overflow = "visible";
        document.body.style.height = "auto";
      }
    }
  },
  data() {
    return {
      show: false,
      myIndex: -1,
      myUrl: ""
    };
  },
  mounted() {
    this.myIndex = this.index;
  },
  beforeDestroy() {},
  methods: {
    closeimg() {
      this.$emit("update:isBig", false);
    },
    deleteimg() {
      this.$emit("del", this.myIndex);
    }
  }
};
</script>
<style lang="less" scoped>
#bigimg {
  background: rgba(0, 0, 0, 0);
  opacity: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  transition: all 0.5s;
  .imgbig {
    width: 100%;
    // height: 100vh;
    margin-top: 50vh;
    transform: translateY(-50%);
  }
  .tool-button {
    position: absolute;
    top: 50px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    text-align: center;
    z-index: 10000;
    img {
      width: 60%;
      margin-top: 50%;
      transform: translateY(-50%);
    }
  }
}
.active {
  opacity: 1 !important;
  background: rgba(0, 0, 0, 1) !important;
  z-index: 10000 !important;
}
</style>