NutzenOverlay

Bearbeiten

Verwenden Sie das automatisch importierte useOverlay Composable, um Modal und [Slideover](/docs/components/slideoverxph09x Komponenten programmgesteuert zu steuern.

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

• Das useOverlay composable wird mit createSharedComposable erstellt, um sicherzustellen, dass der gleiche Overlay-Status in Ihrer gesamten Anwendung gemeinsam genutzt wird.

API Bearbeiten

useOverlay() nicht

useOverlay composable bietet Methoden zum globalen Verwalten von Overlays. Jedes erstellte Overlay gibt eine Instanz mit eigenen Methoden zurück.

create ()(nicht verfügbar)

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

Erstellen Sie ein Overlay und geben Sie eine Factory-Instanz zurück.

Parameters (englisch)

open ()(nicht verfügbar)

open(id: symbol, props?: ComponentProps<T>): OpenedOverlay<T> nicht

Öffnen Sie ein Overlay mit seiner id.

Parameters (englisch)

close () Bearbeiten

close(id: symbol, value?: any): void nicht

Schließen Sie ein Overlay mit seinem id.

Parameters (englisch)

closeAll ()(nicht verfügbar)

closeAll(): void nicht

Schließen Sie alle offenen Überlagerungen.

patch ()(Deutsche Ausgabe)

patch(id: symbol, props: Partial<ComponentProps<T>>): void nicht

Aktualisieren Sie ein Overlay mit seinem id.

Parameters (englisch)

unmount ()(nicht verfügbar)

unmount(id: symbol): void nicht

Entfernen Sie ein Overlay aus dem DOM durch seine id.

Parameters (englisch)

isOpen () Bearbeiten

isOpen(id: symbol): boolean nicht

Prüfen Sie, ob ein Overlay mit seinem id geöffnet ist.

Parameters (englisch)

overlays (englisch)

overlays: Overlay[] nicht

In-Memory-Liste aller Overlays, die erstellt wurden.

Instanz-API

Dies sind die Methoden, die auf der von create() zurückgegebenen Instanz verfügbar sind.

open ()(Deutsche Ausgabe)

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

Öffnet das Overlay. Gibt ein OpenedOverlay zurück, ein Versprechen, das mit dem vom close-Ereignis ausgegebenen Wert aufgelöst wird. Das gleiche Versprechen wird auch als result angezeigt, so dass const { result } = modal.open() auch funktioniert.

Parameters (englisch)

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

const overlay = useOverlay()

const modal = overlay.create(LazyModalExample)

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

close () Bearbeiten

close(value?: any): void (nicht)

Schließen Sie das Overlay.

Parameters (englisch)

patch ()(Deutsche Ausgabe)

patch(props: Partial<ComponentProps<T>>): void nicht

Aktualisieren Sie die Requisiten des Overlays.

Parameters (englisch)

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

Beispiele

With multiple overlays (mit mehreren Überlagerungen)

Dieses Beispiel zeigt, wie Sie mehrere Overlays verwalten und Daten zwischen ihnen übergeben:

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

Bestätigen

Dieses Beispiel zeigt, wie Sie ein wiederverwendbares Bestätigungsdialogmuster mit einem benutzerdefinierten useConfirmDialog Composable erstellen, das useOverlay umschließt.

1. Erstellen Sie eine ConfirmDialog-Komponente, die einen booleschen Wert ausgibt, wenn sie geschlossen wird:

<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. Erstellen Sie ein useConfirmDialog composable, das ein Versprechen zurückgibt:

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. Verwenden Sie das Composable in Ihren Komponenten:

<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 (englisch)

Provide/Inject (Bereitstellen/Einführen)

Beim programmgesteuerten Öffnen von Overlays (Modals, Slideovers usw.) kann die Overlay-Komponente nur auf eingespeiste Werte von der Komponente zugreifen, die UApp enthält (normalerweise app.vue oder Layoutkomponenten).

Daher wird die Verwendung von provide() in Seiten oder übergeordneten Komponenten nicht direkt unterstützt. Um bereitgestellte Werte an Overlays zu übergeben, wird empfohlen, stattdessen Props zu verwenden:

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

const overlay = useOverlay()

const providedValue = inject('valueProvidedInPage')

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