【Vue.js】モーダルウィンドウを作成する方法｜スロット・クリック外で閉じる処理付き

<!-- Modal.vue -->
<script>
// 通常の <script>：全インスタンスで共有されるカウンター（見出しの id を重複させないため）
let uid = 0
</script>

<script setup>
import { ref, watch, nextTick, onBeforeUnmount } from 'vue'

const props = defineProps({
  open: { type: Boolean, default: false },
  title: { type: String, required: true }
})
const emit = defineEmits(['close'])

const titleId = `modal-title-${uid++}`
const dialogRef = ref(null)
let lastFocused = null          // 開く前にフォーカスがあった要素

function close() {
  emit('close')
}

watch(() => props.open, async (isOpen) => {
  if (isOpen) {
    lastFocused = document.activeElement
    document.body.style.overflow = 'hidden'   // 背景のスクロールを止める
    await nextTick()
    dialogRef.value?.focus()                  // フォーカスをモーダルの中へ移す
  } else {
    document.body.style.overflow = ''
    lastFocused?.focus()                      // 閉じたら、元の場所へ戻す
  }
})

onBeforeUnmount(() => {
  document.body.style.overflow = ''
})

// Esc で閉じる／Tab のフォーカスがモーダルの外へ出ないようにする
function onKeydown(event) {
  if (event.key === 'Escape') {
    close()
    return
  }
  if (event.key !== 'Tab') return

  const focusables = dialogRef.value.querySelectorAll(
    'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
  )
  if (focusables.length === 0) {
    event.preventDefault()
    return
  }
  const first = focusables[0]
  const last = focusables[focusables.length - 1]
  const active = document.activeElement

  if (event.shiftKey && (active === first || active === dialogRef.value)) {
    event.preventDefault()
    last.focus()
  } else if (!event.shiftKey && active === last) {
    event.preventDefault()
    first.focus()
  }
}
</script>

<template>
  <!-- body 直下に描画する -->
  <Teleport to="body">
    <div v-if="open" class="modal-overlay" @click.self="close">
      <div
        ref="dialogRef"
        class="modal-content"
        role="dialog"
        aria-modal="true"
        :aria-labelledby="titleId"
        tabindex="-1"
        @keydown="onKeydown"
      >
        <h2 :id="titleId">{{ title }}</h2>

        <slot />

        <div class="modal-footer">
          <!-- footer スロットを渡さなければ、「閉じる」ボタンを出す -->
          <slot name="footer">
            <button type="button" @click="close">閉じる</button>
          </slot>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<style scoped>
.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.modal-content {
  min-width: 300px;
  max-width: 90vw;
  padding: 2rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.modal-footer {
  margin-top: 1.5rem;
  text-align: right;
}
</style>

<script setup>
import { ref } from 'vue'
import Modal from './Modal.vue'

const isOpen = ref(false)
</script>

<template>
  <button type="button" @click="isOpen = true">モーダルを開く</button>

  <Modal :open="isOpen" title="お知らせ" @close="isOpen = false">
    <p>これはスロットで渡された内容です。</p>
  </Modal>
</template>

<Modal :open="isOpen" title="お知らせ" @close="isOpen = false">
  <p>スロットの中身</p>

  <!-- NG：スロットの中身は「親」のスコープ。$emit は親コンポーネントのもので、
       Modal の close ではないため、押しても何も起きない -->
  <button type="button" @click="$emit('close')">閉じる</button>

  <!-- OK：親の状態を、直接変える -->
  <button type="button" @click="isOpen = false">閉じる</button>
</Modal>

<script setup>
import { ref } from 'vue'
import Modal from './Modal.vue'

const isOpen = ref(false)

function onDelete() {
  // 削除の処理...
  isOpen.value = false
}
</script>

<template>
  <button type="button" @click="isOpen = true">削除</button>

  <Modal :open="isOpen" title="削除の確認" @close="isOpen = false">
    <p>本当に削除しますか？この操作は元に戻せません。</p>

    <!-- footer スロットで、ボタンを差し替える -->
    <template #footer>
      <button type="button" @click="isOpen = false">キャンセル</button>
      <button type="button" @click="onDelete">削除する</button>
    </template>
  </Modal>
</template>

<!-- DialogModal.vue：HTML 標準の <dialog> を使う版 -->
<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  open: { type: Boolean, default: false },
  title: { type: String, required: true }
})
const emit = defineEmits(['close'])

const dialogRef = ref(null)

// props.open に合わせて、showModal() / close() を呼ぶ
watch(() => props.open, (isOpen) => {
  const dialog = dialogRef.value
  if (isOpen && !dialog.open) dialog.showModal()
  else if (!isOpen && dialog.open) dialog.close()
})
</script>

<template>
  <!-- Esc で閉じたときも close イベントが発生するので、親の状態を同期できる -->
  <dialog
    ref="dialogRef"
    :aria-label="title"
    @close="emit('close')"
    @click.self="emit('close')"
  >
    <div class="dialog-body">
      <h2>{{ title }}</h2>
      <slot />
      <button type="button" @click="emit('close')">閉じる</button>
    </div>
  </dialog>
</template>

<style scoped>
/* dialog 自体に余白があると、余白部分のクリックが「外側のクリック」と判定されるため、
   余白は内側の div に持たせる */
dialog { padding: 0; border: none; border-radius: 8px; }
.dialog-body { padding: 2rem; }
dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
</style>