<template>
  <div id="overlay"></div>
</template>

<script>
export default {
  name: "Overlay",
  props: {
    zindex: {
      type: Number,
      default: 3000,
    },
    isShow: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    document.getElementById("overlay").remove();
  },
  methods: {
    create() {
      let dom = document.createElement("div");
      dom.id = "overlay";
      dom.style.zIndex = this.zindex;
      dom.style.display = this.isShow;
      document.body.appendChild(dom);
    },
  },
  watch: {
    isShow(newVal, oldVal) {
      if (!newVal) {
        if (document.getElementById("overlay") != null)
          document.getElementById("overlay").remove();
      } else {
        this.create();
      }
    },
  },
};
</script>

<style lang="less">
#overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #0000008e;
}
</style>