SDropZone <s-drop-zone>

Ein Upload-Bereich, der Dateien per Drag & Drop oder über eine Dateiauswahl annimmt. SDropZone ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-drop-zone>.

import { SDropZone } from 'polaris-vue-elements'

Best Practices

• Dateibeschränkungen mit accept festlegen. Legen Sie klar fest, welche Dateitypen die Drop Zone annimmt.
• droprejected mit einer hilfreichen Meldung behandeln. Scheitert eine Datei an der Validierung, reagieren Sie auf das Event und erklären Sie Händlern, was schiefgelaufen ist.
• disabled während der Verarbeitung erwägen. Wird die Drop Zone während eines Uploads deaktiviert, können Händler in der Zwischenzeit keine weiteren Dateien hinzufügen.

<SDropZone label="Product images" accept="image/*" />

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-drop-zone> (auf Englisch).

Beispiel

Value: (empty)

<script setup>
import { ref } from 'vue'
import { SDropZone } from 'polaris-vue-elements'

const value = ref('')
</script>

<template>
  <SDropZone label="Upload a file" accept="image/*" v-model="value" />
  <p>Value: {{ value }}</p>
</template>

v-model

v-model auf <SDropZone> bindet die Property value und lauscht auf das DOM-Event input.

<SDropZone v-model="value" />

entspricht:

<SDropZone :value="value" @input="value = $event.target.value" />

Props

Prop	Typ	Beschreibung
accept	string	Ein String mit den Dateitypen, die die Drop-Zone akzeptiert. Dieser String ist eine kommagetrennte Liste eindeutiger Dateitypangaben, die jeweils eines der folgenden sein können: - Eine Dateiendung, die mit einem Punkt (".") beginnt (z. B. .jpg, .pdf, .doc) - Ein gültiger MIME-Typ-String ohne Endungen Ohne Angabe werden alle Dateitypen akzeptiert.
accessibilityLabel	string	Ein Label, das den Zweck oder Inhalt des Eintrags beschreibt. Wenn gesetzt, wird es Käufern, die assistive Technologien nutzen, vorgelesen und gibt ihnen mehr Kontext.
disabled	boolean	Deaktiviert das Feld und verhindert jegliche Interaktion.
error	any	Zeigt dem Nutzer einen Fehler an. Das Feld erhält eine besondere Gestaltung, um Probleme zu kennzeichnen, die sofort behoben werden müssen.
files	readonly File[]	Ein Array von File-Objekten mit den aktuell vom Nutzer ausgewählten Dateien. Diese Eigenschaft ist schreibgeschützt und kann nicht direkt geändert werden. Um die ausgewählten Dateien zu leeren, die Prop value auf einen leeren String oder null setzen.
label	any	Inhalt, der als Label des Felds verwendet wird.
labelAccessibilityVisibility	"visible" | "exclusive"	Ändert die Sichtbarkeit des Labels der Komponente. - visible: Das Label ist für alle Nutzer sichtbar. - exclusive: Das Label ist visuell ausgeblendet, bleibt aber im Accessibility Tree.
multiple	boolean	Ob mehrere Dateien gleichzeitig ausgewählt oder abgelegt werden können.
name	string	Eine Kennung für das Feld, die innerhalb des nächsten umschließenden Formulars eindeutig ist.
required	boolean	Ob das Feld einen Wert benötigt. Diese Anforderung verleiht dem Feld semantische Bedeutung, führt aber nicht automatisch zur Anzeige eines Fehlers. Wenn ein Fehler angezeigt werden soll, sobald dieses Feld leer ist, verwenden Sie dafür die Eigenschaft error.
value	string	Ein String mit dem Pfad zu der/den ausgewählten Datei(en). Ist noch keine Datei ausgewählt, ist der Wert ein leerer String (""). Hat der Nutzer mehrere Dateien ausgewählt, steht der Wert für die erste Datei in der Liste der ausgewählten Dateien. Der Wert ist immer der Dateiname mit dem Präfix "C:\fakepath", was nicht der tatsächliche Pfad der Datei ist.

Events

Event	Typ
change	Event
droprejected	CustomEvent
input	Event

Auf diese Events lauschen Sie mit Listenern im Stil von @change auf <SDropZone>.

Slots

Slot	Beschreibung
default	Der Inhalt innerhalb des Drop-Zone-Containers