打开与关闭

有了组合式函数（如 useDialog）和内容组件之后，先创建弹层实例，再 open / close。

创建实例

<script setup lang="ts">
import HelloWorld from './HelloWorld.vue'
import { useDialog } from './dialog'

const dialog = useDialog(HelloWorld)
</script>

<template>
  <button @click="dialog.open()">打开</button>
  <button @click="dialog.close()">关闭</button>
</template>

向内容传参

打开时传入（最常用）

dialog.$open({ id: 1, mode: 'edit' })

$open(props) 等价于 open({ props })，只传内容参数时更短。需要当次改容器、slots、closeOn 等再用完整 open(config)。

创建实例时写默认

每次打开都要带的参数，可以写在 useDialog 的第二参，少在 $open 里重复：

const dialog = useDialog(HelloWorld, {
  props: { mode: 'edit' },
})

dialog.$open({ id: 1 })

顶层 props 指哪一侧

配置里经常出现顶层 props，含义取决于写在哪：

写在哪里	顶层 props 给谁
createLayer 第二参	容器（title、width）
useDialog / open	内容（id、mode）

若在打开时既要给内容传参、又要改容器标题，用完整 open：内容用顶层 props，容器写到 container 里：

dialog.open({
  props: { id: 1 },
  container: { props: { title: '当次标题' } },
})

（内容组件里也可以用 defineLayer 声明容器默认标题，见下一章。）

常用实例能力

成员	说明
$open(props?)	打开并传入内容 props（日常默认）
open(config?)	打开；可改容器 / slots / closeOn 等
close()	关闭弹层
visible	是否打开（只读 getter，直接读 dialog.visible）

日常开合用上面三件即可。要从弹层拿回结果见 等待弹层结果；需要 clone、或打开后拿内容 / 容器组件实例，见进阶 实例的更多能力。

可以不传内容组件

useDialog() 允许省略内容组件——仍是「有容器、无内容」；改标题、宽度请走 container:（顶层 props 默认指内容，没有内容时没有落点）。这和「Dialog + 表单还粘在一个文件里」不是一类问题，建模对比见 容器与内容未拆分。

运行时再传入内容（含异步组件）见 动态指定内容组件。

下一步

在内容组件里配置弹层