useOverlay
一个用于通过编程方式控制覆盖层的可组合函数。
用法
使用自动导入的 useOverlay 可组合函数来通过编程方式控制 Modal 和 Slideover 组件。
<script setup lang="ts">
const overlay = useOverlay()
const modal = overlay.create(MyModal)
async function openModal() {
modal.open()
}
</script>
useOverlay可组合函数是使用createSharedComposable创建的，这确保了在整个应用中共享相同的覆盖层状态。
为了从覆盖层返回一个值，可以等待
overlay.open() 的完成。然而，为了实现这一点，覆盖层组件必须触发一个 close 事件。请参阅下面的示例了解详细信息。API
create(component: T, options: OverlayOptions): OverlayInstance
创建一个覆盖层，并返回其实例
- 参数
component: 覆盖层组件options: 覆盖层选项defaultOpen?: boolean: 创建后立即打开覆盖层default: falseprops?: ComponentProps: 一个可选的对象，包含传递给渲染组件的 props。destroyOnClose?: boolean: 关闭时从内存中移除覆盖层default: false
open(id: symbol, props?: ComponentProps<T>): Promise<any>
使用其 id 打开覆盖层
- 参数
id: 覆盖层的标识符props: 一个可选的对象，包含传递给渲染组件的 props。
close(id: symbol, value?: any): void
使用其 id 关闭覆盖层
- 参数
id: 覆盖层的标识符value: 用于解析覆盖层 promise 的值
patch(id: symbol, props: ComponentProps<T>): void
使用其 id 更新覆盖层
- 参数
id: 覆盖层的标识符props: 一个对象，包含要更新的渲染组件的 props。
unmount(id: symbol): void
使用其 id 从 DOM 中移除覆盖层
- 参数
id: 覆盖层的标识符
overlays: Overlay[]
已创建的覆盖层的内存列表
覆盖层实例 API
open(props?: ComponentProps<T>): Promise<any>
打开覆盖层
- 参数
props: 一个可选的对象，包含传递给渲染组件的 props。
<script setup lang="ts">
const overlay = useOverlay()
const modal = overlay.create(MyModalContent)
function openModal() {
modal.open({
title: 'Welcome'
})
}
</script>
close(value?: any): void
关闭覆盖层
- 参数
value: 用于解析覆盖层 promise 的值
patch(props: ComponentProps<T>)
更新覆盖层的 props。
- 参数
props: 一个对象，包含要更新的渲染组件的 props。
<script setup lang="ts">
const overlay = useOverlay()
const modal = overlay.create(MyModal, {
title: 'Welcome'
})
function openModal() {
modal.open()
}
function updateModalTitle() {
modal.patch({ title: 'Updated Title' })
}
</script>
示例
以下是如何使用 useOverlay 可组合函数的完整示例
<script setup lang="ts">
const overlay = useOverlay()
// Create with default props
const modalA = overlay.create(ModalA, { title: 'Welcome' })
const modalB = overlay.create(modalB)
const slideoverA = overlay.create(SlideoverA)
const openModalA = () => {
// Open Modal A, but override the title prop
modalA.open({ title: 'Hello' })
}
const openModalB = async () => {
// Open modalB, and wait for its result
const input = await modalB.open()
// Pass the result from modalB to the slideover, and open it.
slideoverA.open({ input })
}
</script>
<template>
<div>
<button @click="openModal">Open Modal</button>
</div>
</template>
在此示例中，我们使用 useOverlay 可组合函数来控制多个 Modal 和 Slideover。