SPasswordField <s-password-field>

用于输入密码、会隐藏输入内容的文本输入框。 SPasswordField 是 Shopify Polaris <s-password-field> web component 的带类型 Vue 3 wrapper。

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

最佳实践

• 配合密码管理器使用。 设置合适的 autocomplete 值，例如 new-password 或 current-password，让密码管理器帮助商家生成并保存强密码。
• 预先说明规则。 在商家开始输入之前列出所有密码要求，而不是等输入无效后才显示。这样可以避免挫败感和表单被放弃。
• 引导商家创建密码。 实时反馈密码强度，并说明如何让密码更强，而不是在没有任何说明的情况下强制执行规则。
• 允许商家粘贴。 密码管理器及类似工具依赖粘贴功能，禁止粘贴会迫使商家使用能凭记忆输入的弱密码。
• 客户端检查仅作为反馈。 始终在服务器上校验密码，因为浏览器端的约束很容易被绕过。客户端校验是为了快速响应，而不是为了提供安全保障。

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

参阅 Shopify 关于 <s-password-field> 的最佳实践（英文）以获取完整指南。

示例

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

<SPasswordField> 上的 v-model 绑定到 value property，并监听 input DOM 事件。

<SPasswordField v-model="value" />

等价于：

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

Props

Prop	类型	说明
autocomplete	"current-password" | "new-password" | "on" | "off" | "shipping current-password" | "shipping new-password" | "billing current-password" | "billing new-password"	关于字段预期内容的提示。设置为 on（默认值）时，表示该字段应支持自动填充，但没有关于预期内容的更多语义信息。设置为 off 时，表示该字段包含敏感信息或永远不会被保存的内容，例如一次性验证码。此外，也可以提供一个值，描述希望在自动填充时填入该字段的具体数据。
defaultValue	string	字段的默认值。
details	any	为字段提供上下文或指引的附加文本。该文本会与字段及其标签一起显示，为用户提供更多信息或说明。它也会提供给屏幕阅读器用户。
disabled	boolean	禁用字段，不允许任何交互。
error	any	向用户提示错误。字段会采用特定的样式处理，以传达必须立即解决的问题。
id	string	元素的唯一标识符。
label	any	用作字段标签的内容。
labelAccessibilityVisibility	"visible" | "exclusive"	更改组件标签的可见性。 - visible：标签对所有用户可见。 - exclusive：标签在视觉上隐藏，但仍保留在无障碍树中。
maxLength	number	指定允许的最大字符数。
minLength	number	指定允许的最小字符数。
name	string	字段的标识符，在最近的外层表单内唯一。
placeholder	string	描述字段预期值的简短提示。
readOnly	boolean	该字段不能由用户编辑。它可以获得焦点，并会被屏幕阅读器朗读。
required	boolean	字段是否需要填写值。此要求会为字段添加语义，但不会自动显示错误。如果希望在字段为空时显示错误，可以使用 error 属性。
value	string	字段的当前值。如果省略，字段将为空。

Events

Event	类型
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event

在 <SPasswordField> 上使用 @blur 形式的监听器来监听这些事件。

Slots

Slot	说明
details
error