useオーバーレイ
使用法
自動インポートされたuseOverlayコンポーザーを使用して、ModalおよびSlideoverコンポーネントをプログラムで制御します。
<script setup lang="ts">
import { LazyUseOverlayModalExample } from '#components'
const overlay = useOverlay()
const modal = overlay.create(LazyUseOverlayModalExample)
</script>
<template>
<UButton label="Open modal" @click="modal.open()" />
</template>
useOverlayコンポーザブルはcreateSharedComposableを使用して作成され、アプリケーション全体で同じオーバーレイ状態が共有されるようにします。
overlay.open()がオーバーレイから値を取得するのを待ちます。これはoverlayコンポーネントがclose eventを出力する場合にのみ機能します。詳細は以下の例を参照してください。API
useOverlay()
useOverlayコンポーザブルはオーバーレイをグローバルに管理するメソッドを提供します。作成されたオーバーレイはそれぞれ独自のメソッドを持つインスタンスを返します。
create
create(component: T, options?: OverlayOptions<ComponentProps<T>>): OverlayInstance<T>
オーバーレイを作成し、ファクトリーインスタンスを返します。
パラメータ
falseです。falseです。open
open(id: symbol, props?: ComponentProps<T>): OpenedOverlay<T>
idでオーバーレイを開きます。
パラメーター
close
close(id: symbol, value?: any): void
オーバーレイをidで閉じます。
パラメーター
closeAll
closeAll(): void
すべてのオーバーレイを閉じる。
patch
patch(id: symbol, props: Partial<ComponentProps<T>>): void
idでオーバーレイを更新します。
パラメーター
unmount
unmount(id: symbol): void
idによってDOMからオーバーレイを削除します。
パラメータ
isOpen
isOpen(id: symbol): boolean
オーバーレイが開いているかどうかをidで確認します。
パラメータ
オーバーレイ
overlays: Overlay[]
作成されたすべてのオーバーレイのインメモリリスト。
Instance API
これらはcreate()が返すインスタンスで使用できるメソッドです。
open
open(props?: ComponentProps<T>): OpenedOverlay<T>
オーバーレイを開きます。OpenedOverlayを返します。これはcloseイベントによって生成された値で解決されるPromiseです。同じPromiseがresultとしても公開されるため、const { result } = modal.open()も動作します。
パラメータ
<script setup lang="ts">
import { LazyModalExample } from '#components'
const overlay = useOverlay()
const modal = overlay.create(LazyModalExample)
function openModal() {
modal.open({
title: 'Welcome'
})
}
</script>
close
close(value?: any): void
オーバーレイを閉じます。
パラメータ
patch
patch(props: Partial<ComponentProps<T>>): void
オーバーレイの小道具を更新します。
パラメータ
<script setup lang="ts">
import { LazyModalExample } from '#components'
const overlay = useOverlay()
const modal = overlay.create(LazyModalExample, {
props: { title: 'Welcome' }
})
function openModal() {
modal.open()
}
function updateModalTitle() {
modal.patch({ title: 'Updated Title' })
}
</script>
例
複数オーバーレイ付き
この例では、複数のオーバーレイを管理し、データを渡す方法を示します。
<script setup lang="ts">
import { ModalA, ModalB, SlideoverA } from '#components'
const overlay = useOverlay()
// Create with default props
const modalA = overlay.create(ModalA, { props: { title: 'Welcome' } })
const modalB = overlay.create(ModalB)
const slideoverA = overlay.create(SlideoverA)
const openModalA = () => {
// Open modalA, 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>
<UButton label="Open Modal" @click="openModalA" />
</template>
確認ダイアログ
この例では、useOverlayをラップするカスタムuseConfirmDialogコンポーザブルを使用して再利用可能な確認ダイアログパターンを作成する方法を示します。このアプローチにより、特定のビジネス要件やデザインの好みに合わせた意見のあるダイアログが可能になります。
- クローズ時にブール値を出力する
ConfirmDialogコンポーネントを作成します。
<script lang="ts" setup>
interface ConfirmDialogProps {
title?: string
description?: string
}
defineProps<ConfirmDialogProps>()
const emits = defineEmits<{
close: [value: boolean]
}>()
</script>
<template>
<UModal
:title="title"
:description="description"
:dismissible="false"
:ui="{ footer: 'justify-end' }"
>
<template #footer>
<UButton label="Cancel" color="neutral" variant="outline" @click="emits('close', false)" />
<UButton label="Confirm" color="neutral" @click="emits('close', true)" />
</template>
</UModal>
</template>
- Promiseを返す
useConfirmDialogコンポーザブルを作成します。
import { ConfirmDialog } from '#components'
export interface ConfirmDialogOptions {
title: string
description?: string
}
export const useConfirmDialog = () => {
const overlay = useOverlay()
return (options: ConfirmDialogOptions): Promise<boolean> => {
const modal = overlay.create(ConfirmDialog, {
destroyOnClose: true,
props: options
})
return modal.open()
}
}
- コンポーネントでコンポーザブルを使用します。
<script setup lang="ts">
const confirm = useConfirmDialog()
const handleDelete = async () => {
const confirmed = await confirm({
title: 'Delete item',
description: 'Are you sure you want to delete this item?'
})
if (confirmed) {
console.log('Item deleted')
}
}
</script>
<template>
<UButton label="Delete item" @click="handleDelete" />
</template>
注意事項
提供/注入
プログラムでオーバーレイを開くときモーダル、スライドオーバーなど、オーバーレイコンポーネントはUAppを含むコンポーネント通常はapp.vueまたはレイアウトコンポーネントから注入された値にのみアクセスできます。これは、オーバーレイがUAppコンポーネントによってページコンテキストの外側にマウントされるためです。
そのため、ページや親コンポーネントでprovide()を使用することは直接サポートされていません。オーバーレイに与えられた値を渡すには、代わりにpropsを使用することを推奨します。
<script setup lang="ts">
import { LazyModalExample } from '#components'
const overlay = useOverlay()
const providedValue = inject('valueProvidedInPage')
const modal = overlay.create(LazyModalExample, {
props: {
providedValue
}
})
</script>