Dialog / Drawer / Confirm

居中弹窗 RdDialog、侧滑 RdDrawer、Promise 确认框 rdConfirm（打开动态挂载，关闭自动卸载）。 删除等不可逆操作前二次确认；点遮罩默认抖动不关闭。

Dialog 基础用法

新建客户、居中确认/表单弹窗等模态流程。默认 maskClosable=false：点遮罩抖动且不关闭。

<script setup lang="ts">
import { ref } from 'vue'
import { RdDialog } from '@rd-element/ui'

const visible = ref(false)
</script>

<template>
  <el-button type="primary" @click="visible = true">打开 Dialog</el-button>
  <RdDialog
    v-model:visible="visible"
    title="示例弹窗"
    description="点击遮罩会抖动且不关闭"
  >
    <p>这是 RdDialog 内容区。</p>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="visible = false">确定</el-button>
    </template>
  </RdDialog>
</template>

Drawer 基础用法

全部筛选（form）、客户详情（workspace）等侧滑面板。多层抽屉自动堆栈，点外侧关闭最上层。

<script setup lang="ts">
import { ref } from 'vue'
import { RdDrawer } from '@rd-element/ui'

const visible = ref(false)
</script>

<template>
  <el-button @click="visible = true">打开 Drawer</el-button>
  <RdDrawer v-model:visible="visible" title="示例抽屉" description="form 变体">
    <p>抽屉正文</p>
    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </RdDrawer>
</template>

Confirm 确认弹窗

调用 rdConfirm.confirm() 或 useConfirm() 即可；打开时动态挂载，关闭后卸载，无需在根布局常驻组件。

<script setup lang="ts">
import { rdConfirm, toast } from '@rd-element/ui'
// 无需根布局挂载；confirm() 打开时动态挂载，关闭后卸载

async function demoConfirm(type: 'warning' | 'danger' | 'info') {
  const ok = await rdConfirm.confirm({
    title: type === 'danger' ? '删除客户' : '确认提交？',
    body: '此操作需二次确认。点击遮罩可看到抖动。',
    type,
    confirmText: type === 'danger' ? '确认删除' : '确认',
  })
  toast.info(ok ? '已确认' : '已取消')
}
</script>

<template>
  <el-button type="warning" @click="demoConfirm('warning')">警告确认</el-button>
  <el-button type="danger" @click="demoConfirm('danger')">危险确认</el-button>
  <el-button @click="demoConfirm('info')">信息确认</el-button>
</template>

行为说明

• 遮罩抖动：maskClosable=false 时点击遮罩触发 is-shaking，不关闭面板
• Confirm：rdConfirm.confirm() 命令式打开；应用需 app.use(@rd-element/ui) 或 setConfirmAppContext(app._context)
• Drawer 栈：嵌套抽屉共享 useRdDrawerStack，点外侧关闭最上层（或抖动）

API

RdDialog Attributes

属性名	说明	类型	默认值
v-model:visible	是否显示	boolean	false
title	标题	string	''
description	副标题 / 说明	string	''
width	宽度；复杂表单可传 720px	string | number	'520px'
maskClosable	点击遮罩是否关闭；false 时抖动不关闭	boolean	false
showClose	是否显示关闭按钮	boolean	true
alignCenter	垂直居中	boolean	true
destroyOnClose	关闭时销毁内容	boolean	false

RdDialog Events

事件名	说明	类型
open / opened	打开时 / 打开动画结束	() => void
close / closed	关闭时 / 关闭动画结束	() => void

RdDialog Slots

插槽名	说明
default	正文
header	自定义标题区
footer	底栏操作

RdDrawer Attributes

属性名	说明	类型	默认值
v-model:visible	是否显示	boolean	false
variant	form 窄抽屉带标题；workspace 宽工作区	'form' | 'workspace'	'form'
title / description	form 标题栏文案	string	''
size	宽度；默认 form=400px，workspace=80%	string | number	—
maskClosable	点外侧是否关闭最上层	boolean	form=false / workspace=true
direction	滑出方向	'rtl' | 'ltr' | 'ttb' | 'btt'	'rtl'
nested	多层嵌套标记	boolean	false
showClose / withHeader	关闭按钮 / 是否展示标题栏	boolean	—

RdDrawer Events

事件名	说明	类型
open / opened	打开时 / 打开动画结束	() => void
close / closed	关闭时 / 关闭动画结束	() => void

RdDrawer Slots

插槽名	说明
default	正文
footer	底栏操作

rdConfirm.confirm / ConfirmOptions

属性名	说明	类型	默认值
title	标题	string	—
body	说明文案	string	—
type	语义色与图标	'warning' | 'danger' | 'info'	'warning'
confirmText	确认按钮文案	string	'确定'
cancelText	取消按钮文案	string	'取消'

返回 Promise<boolean>（true = 用户确认）。