vue3の新機能「teleport」を使ってモーダルを作成する

モーダルを作る際に、vue2では僕は「vuejs-modal」というライブラリを愛用していましたが、
vue3では現在は使えません...。

では、どうすればよいか!?

新機能の「teleport」というのを使ってモーダルを作ります。

では、早速行ってみましょう！

モーダル用のコンポーネントを作成する

モーダル用にコンポーネントを作ります

SampleModal.vueという名前にしました。

<template lang="pug">
<teleport to="body">
  <div class="modal" id="sample-modal" v-show="isVisible" @click="close"></div>
  <div class="modal-content" v-show="isVisible">ああああああああああああ内容です内容です</div>
</teleport>
</template>

<script>
export default {
  props: {
    isVisible: {
      required: true,
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
    }
  },
  methods: {
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang='sass'>
.modal
  position: fixed
  top: 0
  right: 0
  bottom: 0
  left: 0
  background-color: rgba(0,0,0,.5)
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center

.modal-content
  position: fixed
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  background-color: rgba(0,0,0,.5)
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  
  // モーダルの幅や色などはお好きにどうぞ！
  background-color: white
  width: 600px
  height: auto
  border-radius: 20px
  padding: 20px

</style>

「modalクラス」のdivはマスクするようで、背景をちょっと背景がかった色にしています。
「modal-contentクラス」は、モーダルの中身を作っていきます。

modalクラスをクリックするとcloseメソッドが呼び出されるようにしているのは、
モーダルの外側をクリックした時に、モーダルを閉じるためです。

デザインやスタイルはお好きにしてください。

そして、呼び出し側はどうするかというと、コンポー年とを呼び出して、モーダルの表示・非表示を行う「isVisibleをtrueにしたりfalseにしたりするだけ」です。

<template lang="pug">
<div>
  <sample-modal :isVisible="sampleModalVisible" @close="closeSampleModal"></sample-modal>
</div>
</template>

<script>
export default {
  props: {
  },
  data() {
    return {
        sampleModalVisible: false,
    }
  },
  methods: {
    showSampleModal() {
      this.sampleModalVisible = true
    }
    closeSampleModal() {
      this.sampleModalVisible = false
    }
  }
}
</script>

<style scoped lang='sass'>

</style>

これで、モーダルが完成しました！

slotを使ったり、propsを増やしたりして、外から指定できるものを増やすともっと素晴らしいモーダルができるかなと思います。

以上です！