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>

Attributes

属性名	说明	类型	默认值
v-model:visible	是否显示	boolean	false
title	标题	string	''
description	副标题 / 说明	string	''
width	宽度；复杂表单可传 720px	string | number	'520px'
maskClosable	点击遮罩是否关闭；false 时抖动不关闭	boolean	false
showClose	是否显示关闭按钮	boolean	true
alignCenter	垂直居中；默认 false，距顶 10vh	boolean	false
destroyOnClose	关闭时销毁内容	boolean	false
（行为）	默认可拖标题栏移动；右下角可缩放；关闭后复位	—	—

Events

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

Slots

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

Drawer 基础用法

侧滑面板。默认 maskClosable=false（点外侧抖动不关）；设为 true 时点外侧直接关闭、无抖动。 size / direction 等透传 el-drawer。

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

const locked = ref(false)
const closable = ref(false)
</script>

<template>
  <el-button @click="locked = true">不可点外侧关闭</el-button>
  <el-button type="primary" @click="closable = true">可点外侧关闭</el-button>

  <RdDrawer
    v-model:visible="locked"
    title="遮罩锁定"
    description="maskClosable=false → 点外侧加 is-shaking，不关闭"
    :mask-closable="false"
  >
    <p>点遮罩或外侧区域会抖动，需点右上角关闭。</p>
    <template #footer>
      <el-button @click="locked = false">关闭</el-button>
    </template>
  </RdDrawer>

  <RdDrawer
    v-model:visible="closable"
    title="遮罩可关"
    description="maskClosable=true → 点外侧直接关闭，无抖动"
    :mask-closable="true"
  >
    <p>点遮罩或外侧区域会直接关闭。</p>
    <template #footer>
      <el-button @click="closable = false">关闭</el-button>
    </template>
  </RdDrawer>
</template>

Drawer 变体与嵌套

rd-drawer--form / rd-drawer--workspace 控制版式； 嵌套时下层加 rd-drawer--behind（左移缩放变暗），顶层加 rd-drawer--nested（更深阴影）。

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

const workspace = ref(false)
const root = ref(false)
const nested = ref(false)
</script>

<template>
  <el-button @click="workspace = true">workspace 宽抽屉</el-button>
  <el-button type="primary" @click="root = true">打开嵌套叠层</el-button>

  <RdDrawer
    v-model:visible="workspace"
    variant="workspace"
    title="客户详情"
    with-header
    :mask-closable="true"
    size="80%"
  >
    <p>宽抽屉内容区。</p>
    <template #footer>
      <el-button @click="workspace = false">关闭</el-button>
    </template>
  </RdDrawer>

  <RdDrawer
    v-model:visible="root"
    title="第一层抽屉"
    :mask-closable="true"
  >
    <el-button type="primary" @click="nested = true">打开第二层</el-button>
    <template #footer>
      <el-button @click="root = false">关闭</el-button>
    </template>

    <RdDrawer
      v-model:visible="nested"
      nested
      title="第二层抽屉"
      :mask-closable="true"
      size="360px"
    >
      <p>点外侧只关最上层；下层会显示 behind 叠层效果。</p>
      <template #footer>
        <el-button @click="nested = false">关闭本层</el-button>
      </template>
    </RdDrawer>
  </RdDrawer>
</template>

Drawer 内嵌套 Dialog

抽屉内再开 RdDialog（append-to-body）。点击弹框内容不应触发抽屉 is-shaking；关弹框后点抽屉外侧仍按 maskClosable 关闭或抖动。

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

const drawerOpen = ref(false)
const dialogOpen = ref(false)
</script>

<template>
  <el-button type="primary" @click="drawerOpen = true">打开抽屉再开弹框</el-button>

  <RdDrawer
    v-model:visible="drawerOpen"
    title="客户编辑"
    description="抽屉内可再开 RdDialog；点弹框内容不会让抽屉抖动"
    :mask-closable="false"
  >
    <p>先打开抽屉，再点下方按钮打开嵌套弹框。</p>
    <el-button type="primary" @click="dialogOpen = true">打开嵌套 Dialog</el-button>
    <template #footer>
      <el-button @click="drawerOpen = false">关闭抽屉</el-button>
    </template>
  </RdDrawer>

  <RdDialog
    v-model:visible="dialogOpen"
    title="二次确认"
    description="append-to-body；点本弹框内容 / 按钮，抽屉不应抖动"
    width="420px"
  >
    <p>这是挂在 body 上的弹框。可点击标题、正文与按钮验证抽屉不抖。</p>
    <template #footer>
      <el-button @click="dialogOpen = false">取消</el-button>
      <el-button type="primary" @click="dialogOpen = false">确定</el-button>
    </template>
  </RdDialog>
</template>

Attributes

属性名	说明	类型	默认值
v-model:visible	是否显示	boolean	false
variant	form 窄抽屉带标题；workspace 宽工作区	'form' | 'workspace'	'form'
title / description	标题栏文案（withHeader 时）	string	''
maskClosable	点外侧：true 直接关闭；false 抖动不关闭	boolean	false
showClose / withHeader	关闭按钮 / 是否展示标题栏（默认 form 有、workspace 无）	boolean	—
nested	多层嵌套标记	boolean	false
…	其余透传 el-drawer（size / direction / destroy-on-close 等）	—	size 默认 form=400px、workspace=80%

Events

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

Slots

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

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>

rdConfirm.confirm / ConfirmOptions

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

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

行为说明

• is-shaking：maskClosable=false 时点外侧触发抖动动画，不关闭
• rd-drawer--form / --workspace：版式皮肤（窄表单 / 宽工作区）
• rd-drawer--behind / --nested：多层栈时下层左移缩放变暗，顶层加深阴影
• Confirm：rdConfirm.confirm() 命令式打开；应用需 app.use(@rd-element/ui) 或 setConfirmAppContext(app._context)
• Drawer 栈：嵌套抽屉共享 useRdDrawerStack，点外侧作用于最上层
• 抽屉内 Dialog：点在 Dialog / MessageBox 上不算抽屉外侧，不触发抖动