useOverlay 사용법

Usage

자동으로 가져온 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>

• xuseOverlay 컴포지션은 createSharedComposable를 사용하여 만들어지므로 전체 응용 프로그램에서 동일한 오버레이 상태를 공유합니다.

API 사용

useOverlay() (useOverlay())

useOverlay 컴포지션 가능은 오버레이를 전역적으로 관리하는 메서드를 제공합니다. 생성된 각 오버레이는 고유한 메소드를 사용하여 인스턴스를 반환합니다.

create ()

create(component: T, options?: OverlayOptions<ComponentProps<T>>): OverlayInstance<T> (create(component: T, options?: OverlayOptions<ComponentProps<T>>): OverlayInstance<T>)

중첩을 만들고 팩토리 인스턴스를 반환합니다.

매개 변수

open ()

open(id: symbol, props?: ComponentProps<T>): OpenedOverlay<T> (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 (unmount(id: symbol): void)

DOM에서 id를 사용하여 오버레이를 제거합니다.

Parameters (#### 매개변수)

isOpen ()

isOpen(id: symbol): boolean (isOpen(id: symbol): boolean)

중첩이 id를 사용하여 열려 있는지 확인합니다.

매개변수

오버레이

overlays: Overlay[]

작성된 모든 중첩의 메모리 내 목록입니다.

Instance API API

다음은 create()가 반환한 인스턴스에서 사용할 수 있는 메서드입니다.These are the methods available on the instance returned by create().

open ()

open(props?: ComponentProps<T>): OpenedOverlay<T> (open(props?: ComponentProps<T>): OpenedOverlay<T>)

오버레이를 엽니다. OpenedOverlay, 즉 close 이벤트에서 방출된 값으로 분석되는 Promise를 반환합니다. 동일한 promise가 result로도 노출되므로 const { result } = modal.open()도 작동합니다.

매개 변수Name

<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>

examples 예제

다중 오버레이 포함

다음 예에서는 여러 오버레이를 관리하고 오버레이 간에 데이터를 전달하는 방법을 보여 줍니다.

<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 컴포지션을 사용하여 재사용 가능한 확인 대화 상자 패턴을 생성하는 방법을 보여 줍니다. 이 방법을 통해 특정 비즈니스 요구 사항 및 디자인 환경설정에 맞게 조정된 의견 지정 대화 상자를 사용할 수 있습니다.

1. 닫을 때 부울 값을 방사하는 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>

2. 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()
  }
}

3. 구성 요소에서 구성 가능한 구성 요소를 사용합니다.Use the composable in your components:

<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>

Caveats의 지도

Provide/주입

프로그래밍 방식으로 오버레이를 열 때(모드, 슬라이드오버 등) 오버레이 구성 요소는 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>