Vue.jsでオーバーレイを作成する（TypeScript対応版）

作成したオーバーレイ

Vue.jsで利用できるオーバーレイ（モーダル）のコンポーネントを作成しました。親コンポーネントでオーバーレイ内に表示するコンテンツをslotで指定してから、propで表示の切り替えが可能です。

デモページ

https://demo.isystk.com/nuxtjs/ui/overlay

作成したコンポーネント

Overlay.vue

<template>
  <div>
    <div
      v-if="isVisible"
      id="overlay-background"
      @click.prevent="close()"
    ></div>
    <div class="isystk-overlay" :class="{ open: isVisible }">
      <a href="#" class="close" @click.prevent="close()">
        <i class="far fa-times-circle"></i>
      </a>
      <div class="wrap">
        <slot name="body"></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { PropType } from "vue";
import { Component, Vue, Prop, PropSync, Watch } from "vue-property-decorator";

@Component({
  layout: "loginLayout"
})
export default class Overlay extends Vue {
  // 表示するかどうか
  @PropSync("isVisibleOverlay", {
    type: Boolean,
    default: false
  })
  isVisible;

  // オーバーレイを閉じます
  close(): void {
    this.isVisible = false;
  }
}
</script>

<style lang="scss" scoped>
#overlay-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0e0e0e;
  opacity: 0.5;
  z-index: 10000;
}
.isystk-overlay {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  max-width: 1200px;
  z-index: 10001;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition: 0.1s linear;
}
.isystk-overlay .wrap {
  background-color: #fff;
  padding: 10px;
}
.isystk-overlay.open {
  opacity: 1;
  visibility: visible;
  animation: open-animation 0.5s ease 0s 1 forwards;
}
@keyframes open-animation {
  0% {
    transform: scaleY(0.1) scaleX(0.1);
  }
  50% {
    transform: scaleY(1) scaleX(0.1);
  }
  100% {
    transform: scaleY(1) scaleX(1);
  }
}
.isystk-overlay .title {
  margin-bottom: 5px;
  padding: 5px;
  border-bottom: solid 1px #ccc;
  font-size: 20px;
}
.isystk-overlay td {
  padding: 10px;
}
.isystk-overlay .close {
  position: absolute;
  right: 0;
  margin: 5px;
  zoom: 100%;
  color: #333;
}
</style>

使い方

<template>
  <div>
    <div class="row">
      <div class="col-12">
        <a href="#" @click.prevent="showOverlay()">
          オーバーレイを表示する
        </a>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-5 m-auto">
        <Overlay :is-visible-overlay.sync="isVisibleOverlay">
          <template v-slot:body>
            オーバーレイ内に表示するコンテンツ
          </template>
        </Overlay>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Overlay from "@/components/ui/Overlay.vue";
@Component({
  components: {
    Overlay
  }
})
export default class extends Vue {

  isVisibleOverlay = false;

  showOverlay(): void {
    this.isVisibleOverlay = true;
  }
}
</script>