Alert Dialog 警告对话框

以重要内容打断用户并等待回应的模态对话框。在紧凑触屏上变为底部抽屉。

基础用法

SAlertDialog() {
  SAlertDialogTrigger() { SButton({ text: 'Delete account', variant: 'destructive' }) }
  SAlertDialogContent() {
    SDialogHeader() {
      SDialogTitle({ text: 'Are you absolutely sure?' })
      SDialogDescription({ text: 'This action cannot be undone.' })
    }
    SDialogFooter() {
      SAlertDialogCancel()
      SAlertDialogAction({ text: 'Continue', onAction: () => this.deleteAccount() })
    }
  }
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SAlertDialog

shadcn-vue 的 AlertDialog：一种打断用户并期待其响应的模态对话框。与 Dialog 不同，它没有关闭按钮，并会忽略遮罩点击；返回手势 / Esc 仍可取消。Header、Title、Description 与 Footer 沿用对话框的各个部件（SDialogHeader … SDialogFooter）。

受控（open: this.show!!，或 open + onOpenChange）时：Action / Cancel / 返回手势只会请求关闭；对话框会在父组件的 open 变回 false 时才关闭（与 SDialog 相同），因此父组件可以拒绝关闭。

属性	类型	默认值	说明
open!!	boolean | undefined	undefined
defaultOpen	boolean	false

事件	类型	默认值	说明
onOpenChange	(open: boolean) => void	() => { }

插槽: 子组件（尾随闭包）

SAlertDialogTrigger

插槽: 子组件（尾随闭包）

SAlertDialogContent

警告面板：没有关闭按钮，忽略遮罩点击，在紧凑的触控屏上使用 Drawer。

插槽: 子组件（尾随闭包）

SAlertDialogAction

主要操作；执行 onAction，然后关闭对话框（受控的所有者可以拒绝）。请通过 onAction 传入具体工作——在该组件上链式调用的 .onClick() 不会触发（按钮自身的点击会接管）。

属性	类型	默认值	说明
text	ResourceStr	$r('app.string.spark_continue')
variant	ButtonVariant ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'	'default'	例如危险操作使用 'destructive'
disabled	boolean	false

事件	类型	默认值	说明
onAction	() => void	() => { }

SAlertDialogCancel

取消按钮（outline 样式）；执行 onCancel，然后关闭对话框。

属性	类型	默认值	说明
text	ResourceStr	$r('app.string.spark_cancel')

事件	类型	默认值	说明
onCancel	() => void	() => { }