SPasswordField <s-password-field>

Ein Texteingabefeld für Passwörter, das die Eingabe maskiert. SPasswordField ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-password-field>.

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

Best Practices

• Mit Passwortmanagern zusammenarbeiten. Setzen Sie einen passenden autocomplete-Wert wie new-password oder current-password, damit Passwortmanager Händlern helfen können, starke Passwörter zu erzeugen und zu speichern.
• Regeln vorab nennen. Führen Sie alle Passwortanforderungen auf, bevor Händler mit der Eingabe beginnen, statt sie erst nach einer ungültigen Eingabe zu zeigen. Das vermeidet Frust und abgebrochene Formulare.
• Händler beim Erstellen eines Passworts anleiten. Geben Sie Live-Feedback zur Passwortstärke und erklären Sie, was es stärker machen würde, statt Regeln ohne Kontext durchzusetzen.
• Einfügen erlauben. Passwortmanager und ähnliche Werkzeuge sind auf Einfügen angewiesen. Wird es blockiert, greifen Händler zu schwächeren Passwörtern, die sie aus dem Gedächtnis tippen können.
• Clientseitige Prüfungen nur als Feedback betrachten. Validieren Sie das Passwort immer auf Ihrem Server, da sich Browser-Einschränkungen leicht umgehen lassen. Clientseitige Validierung dient der schnellen Rückmeldung, nicht der Sicherheit.

<SPasswordField label="New password" autocomplete="new-password" details="Use at least 12 characters." />

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

Beispiel

Length: 0

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

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

<template>
  <SPasswordField label="Password" placeholder="Enter your password" v-model="value" />
  <p>Length: {{ value.length }}</p>
</template>

v-model

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

<SPasswordField v-model="value" />

entspricht:

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

Props

Prop	Typ	Beschreibung
autocomplete	"current-password" | "new-password" | "on" | "off" | "shipping current-password" | "shipping new-password" | "billing current-password" | "billing new-password"	Ein Hinweis auf den vorgesehenen Inhalt des Felds. Bei on (Standard) gibt diese Eigenschaft an, dass das Feld Autofill unterstützen soll, ohne dass weitere semantische Informationen zum vorgesehenen Inhalt vorliegen. Mit off wird angegeben, dass das Feld sensible Informationen oder Inhalte enthält, die nie gespeichert werden, etwa Einmalcodes. Alternativ kann ein Wert angegeben werden, der die konkreten Daten beschreibt, die beim Autofill in dieses Feld eingetragen werden sollen.
defaultValue	string	Der Standardwert des Feldes.
details	any	Zusätzlicher Text, der Kontext oder Hilfestellung zum Feld bietet. Dieser Text wird zusammen mit dem Feld und seinem Label angezeigt, um dem Nutzer weitere Informationen oder Anweisungen zu geben. Er wird auch Screenreader-Nutzern zugänglich gemacht.
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.
id	string	Eine eindeutige Kennung für das Element.
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.
maxLength	number	Gibt die maximal erlaubte Anzahl an Zeichen an.
minLength	number	Gibt die minimal erlaubte Anzahl an Zeichen an.
name	string	Eine Kennung für das Feld, die innerhalb des nächsten umschließenden Formulars eindeutig ist.
placeholder	string	Ein kurzer Hinweis, der den erwarteten Wert des Felds beschreibt.
readOnly	boolean	Das Feld kann vom Benutzer nicht bearbeitet werden. Es ist fokussierbar und wird von Screenreadern angesagt.
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	Der aktuelle Wert des Feldes. Wird er weggelassen, ist das Feld leer.

Events

Event	Typ
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event

Auf diese Events lauschen Sie mit Listenern im Stil von @blur auf <SPasswordField>.

Slots

Slot	Beschreibung
details
error