Dialog 對話框

在保留當前頁面狀態的情況下，告知使用者並承載相關操作。

基礎用法

受控對話框

import { useState } from 'react'
import { LhButton, LhDialog } from '@lh-ui/react'

export default function Demo() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <LhButton type="primary" onClick={() => setOpen(true)}>
        打开对话框
      </LhButton>
      <LhDialog
        open={open}
        title="提示"
        width="420px"
        footer={
          <>
            <LhButton onClick={() => setOpen(false)}>取消</LhButton>
            <LhButton type="primary" onClick={() => setOpen(false)}>确定</LhButton>
          </>
        }
        onClose={() => setOpen(false)}
      >
        <p>这是一个受控对话框。</p>
      </LhDialog>
    </>
  )
}

Dialog Props

屬性	說明	型別	可選值	預設值
open	是否開啟（純受控）	boolean	—	false
title	標題（無 header 時也作 aria-label 兜底）	string	—	—
width	寬度	string | number	—	—
fullscreen	全螢幕	boolean	—	false
showClose	顯示關閉按鈕	boolean	—	true
closeOnClickModal	點選遮罩關閉	boolean	—	true
closeOnPressEscape	按 Esc 關閉	boolean	—	true
draggable	可拖曳（拖標題列）	boolean	—	false
center	標題與底部置中	boolean	—	false
position	自訂定位偏移	{ top?: string; left?: string }	—	—
lockScroll	開啟時鎖定 body 捲動	boolean	—	true
beforeClose	關閉前攔截（傳回 false / Promise<false> 則不關）	() => boolean | Promise<boolean>	—	—
top	與頂部的距離	string	—	—
zIndex	層級（預設由 useLhZIndex 遞增分配）	number	—	—
header	自訂頭部（覆蓋 title）	ReactNode	—	—
footer	自訂底部	ReactNode	—	—
themeVars	元件級主題變數	Record<string, string>	—	—
sx	快速版面配置屬性	SxProps	—	—

Dialog 事件

事件	說明	回呼簽名	Vue 對照
onClose	請求關閉（遮罩 / Esc / 關閉按鈕觸發，beforeClose 攔截後不呼叫）	() => void	update:modelValue
onOpen	開啟瞬間觸發（DOM 已掛載）	() => void	@open
onOpened	開啟過渡結束後觸發	() => void	@opened
onCloseStart	關閉過渡開始時觸發	() => void	@close
onClosed	關閉過渡結束後觸發（DOM 卸載）	() => void	@closed

ref

forwardRef<HTMLDivElement>。LhDialogInstance 暫無命令式方法。

純受控語意

與 plus 不同，本庫 Dialog 沒有內部 isVisible 中間態：open 完全由外部 state 持有，任何關閉路徑只呼叫 onClose。詳見遷移指南。

多彈層 Esc

useLhOverlayStack 維護開啟順序堆疊，Esc 只關棧頂彈層，避免一次按鍵帶走全部彈層。

樣式

import '@lh-ui/react/style/dialog'