Dialog ダイアログ

モーダルダイアログです。Vue2 には Teleport がないため、オーバーレイのホストは mounted 時に body にマウントされ（fixed 配置）、コンポーネントは完全なリアクティブな接続を保ちます。オーバーレイのクリック / ESC / クローズボタン / beforeClose いずれでもクローズを制御でき、ドラッグとスクロールロックをサポートします。

ダイアログ

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhButton type="primary" @click="basic = true">基本ダイアログ</LhButton>
      <LhButton @click="center = true">position="center" 中央</LhButton>
      <LhButton @click="bottom = true">position="bottom" 下部</LhButton>
      <LhButton @click="full = true">fullscreen 全画面</LhButton>
      <LhButton @click="drag = true">draggable ドラッグ可能</LhButton>
      <LhButton @click="strict = true">オーバーレイ / ESC でのクローズを禁止</LhButton>
      <LhButton @click="guard = true">beforeClose でブロック</LhButton>
      <LhButton @click="noClose = true">showClose=false</LhButton>
    </div>
    <LhDialog v-model="basic" title="題跋" width="420px" :top="top" :z-index="2000">
      <p style="margin: 0">ダイアログは body にマウントされ、オーバーレイと内容はいずれも fixed 配置です。top が上部からの距離、zIndex が重ね合わせの順序を制御します。</p>
      <template #footer>
        <LhButton @click="basic = false">キャンセル</LhButton>
        <LhButton type="primary" @click="basic = false">落款</LhButton>
      </template>
    </LhDialog>
    <LhDialog v-model="center" title="中央のポップアップ" position="center" width="360px" center>
      <p style="margin: 0">position="center" で垂直中央に配置。center はタイトルと下部ボタンを中央揃えにします。</p>
      <template #footer>
        <LhButton type="primary" @click="center = false">了解しました</LhButton>
      </template>
    </LhDialog>
    <LhDialog v-model="bottom" title="下部ポップアップ" position="bottom" width="480px">
      <p style="margin: 0">position="bottom" は下部に寄せて表示します。モバイルの操作パネルに適しています。</p>
    </LhDialog>
    <LhDialog v-model="full" title="全画面表示" fullscreen>
      <p style="margin: 0">fullscreen はビューポート全体を占め、内容エリアは残りの高さに合わせます。</p>
      <template #footer>
        <LhButton type="primary" @click="full = false">閉じる</LhButton>
      </template>
    </LhDialog>
    <LhDialog v-model="drag" title="タイトルバーをドラッグ" draggable width="420px">
      <p style="margin: 0">draggable を有効にすると、タイトルバーを押すことでダイアログをドラッグできます。</p>
    </LhDialog>
    <LhDialog
      v-model="strict"
      title="厳格モード"
      width="400px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :lock-scroll="true"
    >
      <p style="margin: 0">closeOnClickModal / closeOnPressEscape をいずれも無効にし、lockScroll でページのスクロールをロックします。閉じるにはボタンを押すしかありません。</p>
      <template #footer>
        <LhButton type="primary" @click="strict = false">唯一の出口</LhButton>
      </template>
    </LhDialog>
    <LhDialog v-model="guard" title="クローズ前にブロック" width="400px" :before-close="beforeClose">
      <p style="margin: 0">beforeClose がクローズ動作をブロックし、done() を呼ぶことで実際に閉じられます（ここでは二次確認をデモ）。</p>
    </LhDialog>
    <LhDialog v-model="noClose" title="クローズボタンなし" width="360px" :show-close="false">
      <p style="margin: 0">showClose=false で右上のクローズボタンを非表示にします。</p>
      <template #footer>
        <LhButton type="primary" @click="noClose = false">閉じる</LhButton>
      </template>
    </LhDialog>
  </div>
</template>

<script>
export default {
  data: () => ({
    basic: false,
    center: false,
    bottom: false,
    full: false,
    drag: false,
    strict: false,
    guard: false,
    noClose: false,
    top: '15vh',
  }),
  methods: {
    beforeClose(done) {
      if (window.confirm('このダイアログを閉じますか？')) done()
    },
  },
}
</script>

Props

プロパティ	説明	型	デフォルト値
v-model	表示切り替え（model: modelValue/input。:visible.sync 以外の標準的な v-model の使い方にも対応）	boolean	false
title	タイトル	string	''
width	幅	string \| number	'480px'
position	位置	'top' \| 'center' \| 'bottom'	'center'
center	タイトルと下部ボタンを中央揃え	boolean	false
fullscreen	全画面	boolean	false
showClose	クローズボタンを表示	boolean	true
closeOnClickModal / closeOnPressEscape	オーバーレイ / ESC で閉じる	boolean	true
draggable	ヘッダーのドラッグ（ビューポート境界で制約）	boolean	false
lockScroll	body のスクロールをロック	boolean	true
beforeClose	クローズ前にブロックし、done() で実際に閉じる	(done) => void	—
top	上部からの距離（position=top のとき有効）	string	'15vh'
zIndex / themeVars / bgPattern / sx	重ね合わせの順序とテーマの上書き	—	—

Events

イベント	説明	コールバックパラメータ
input	v-model の表示状態の同期	boolean
open	開く処理の開始（トランジションに进入）	—
opened	開く処理の終了（トランジション完了）	—
close	閉じる処理の開始（トランジションに进入）	—
closed	閉じる処理の終了（トランジション完了）	—

Slots

スロット	説明
default	本文
header	カスタムタイトル
footer	下部の操作エリア

メソッド

メソッド	説明
close()	ダイアログを閉じる
isVisible	現在表示しているかどうか（defineExpose）