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）