UseOverlay

xph0000xUso

Utilice el componente useOverlay autoimportado para controlar programáticamente los componentes Modal y 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>

El componente useOverlay se crea utilizando createSharedComposable, asegurando que el mismo estado de superposición se comparta en toda su aplicación.

API

useOverlay()x{lang="ts-type"} (Edición española)

El composable useOverlay proporciona métodos para administrar superposiciones globalmente. Cada superposición creada devuelve una instancia con sus propios métodos.

crear ()

create(component: T, options?: OverlayOptions<ComponentProps<T>>): OverlayInstance<T>x{lang="ts-type"} (Edición española)

Crear una superposición y devolver una instancia de fábrica.

Parámetros

open (en inglés)

open(id: symbol, props?: ComponentProps<T>): OpenedOverlay<T>x{lang="ts-type"} (Edición española)

Abra una superposición por su id.

Parámetros

close (en inglés)

close(id: symbol, value?: any): voidxx{lang="ts-type"} (Edición española)

Cierre una superposición con su id.

Parámetros

closeAll ()

closeAll(): voidx{lang="ts-type"} (Edición española)

Cierre todas las superficies abiertas.

patch (en inglés)

patch(id: symbol, props: Partial<ComponentProps<T>>): voidxx{lang="ts-type"} (Edición española)

Actualizar una superposición por su id.

Parámetros

unmount (en inglés)

unmount(id: symbol): voidxx{lang="ts-type"} (Edición española)

Quitar una superposición del DOM por su id.

Parámetros

isAbierto ()

isOpen(id: symbol): booleanxx{lang="ts-type"} (Edición española)

Compruebe si una superposición está abierta utilizando su id.

Parámetros

superposiciones

overlays: Overlay[]xx{lang="ts-type"} (Edición española)

Lista en memoria de todas las superposiciones que se crearon.

Instance API (Edición española)

Estos son los métodos disponibles en la instancia devuelta por create().

open (en inglés)

open(props?: ComponentProps<T>): OpenedOverlay<T>xx{lang="ts-type"} (Edición española)

Abre la superposición. Devuelve un OpenedOverlay, una promesa que se resuelve con el valor emitido por el evento close.La misma promesa también se expone como result, por lo que const { result } = modal.open() también funciona.

Parámetros

<script setup lang="ts">
import { LazyModalExample } from '#components'

const overlay = useOverlay()

const modal = overlay.create(LazyModalExample)

function openModal() {
  modal.open({
    title: 'Welcome'
  })
}
</script>

close ()(en español)

close(value?: any): voidxx{lang="ts-type"} (Edición española)

Cierra el overlay.

Parámetros

patch (Edición española)

patch(props: Partial<ComponentProps<T>>): voidx{lang="ts-type"} (Edición española)

Actualizar los soportes de la superposición.

Parámetros

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

Ejemplos

Con múltiples superposiciones

Este ejemplo muestra cómo administrar varias superposiciones y pasar datos entre ellas:

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

Confirmar el diálogo

Este ejemplo demuestra cómo crear un patrón de diálogo de confirmación reutilizable utilizando un componente personalizado useConfirmDialog que envuelve useOverlay. Este enfoque permite diálogos obstinados adaptados a requisitos comerciales específicos y preferencias de diseño.

1. Crear un componente ConfirmDialog que emite un valor booleano cuando se cierra:

<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. Crear un composable useConfirmDialog que devuelva una promesa:

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 el composable en sus componentes:

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

Cavanías

Provide/Inyectar

Al abrir las superposiciones mediante programación (modales, deslizamientos, etc.), el componente de superposición solo puede acceder a los valores inyectados desde el componente que contiene UApp (normalmente app.vue o componentes de diseño).

Como tal, el uso de provide() en páginas o componentes principales no es compatible directamente.Para pasar los valores proporcionados a las superposiciones, el enfoque recomendado es usar props en su lugar:

<script setup lang="ts">
import { LazyModalExample } from '#components'

const overlay = useOverlay()

const providedValue = inject('valueProvidedInPage')

const modal = overlay.create(LazyModalExample, {
  props: {
    providedValue
  }
})
</script>