SPasswordField <s-password-field>

Một ô nhập văn bản cho mật khẩu, che đi những gì được gõ. SPasswordField là Vue 3 wrapper có type cho web component <s-password-field> của Shopify Polaris.

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

Best practices

• Tương thích với trình quản lý mật khẩu. Đặt giá trị autocomplete phù hợp, chẳng hạn new-password hoặc current-password, để trình quản lý mật khẩu có thể giúp người bán tạo và lưu mật khẩu mạnh.
• Nêu rõ quy tắc ngay từ đầu. Liệt kê mọi yêu cầu về mật khẩu trước khi người bán bắt đầu nhập, thay vì chỉ cho biết sau khi họ nhập sai. Điều này tránh gây khó chịu và khiến người dùng bỏ dở form.
• Hướng dẫn người bán khi tạo mật khẩu. Đưa ra phản hồi trực tiếp về độ mạnh của mật khẩu và giải thích cách làm nó mạnh hơn, thay vì chỉ áp đặt quy tắc mà không có ngữ cảnh.
• Cho phép người bán dán. Trình quản lý mật khẩu và các công cụ tương tự phụ thuộc vào việc dán, và chặn dán sẽ đẩy người bán sang dùng mật khẩu yếu hơn mà họ có thể gõ theo trí nhớ.
• Coi kiểm tra phía client chỉ là phản hồi. Luôn xác thực mật khẩu trên server của bạn, vì các ràng buộc của trình duyệt rất dễ bị vượt qua. Xác thực phía client là để phản hồi nhanh, không phải để đảm bảo bảo mật.

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

Xem best practices của Shopify cho <s-password-field> (tiếng Anh) để có hướng dẫn đầy đủ.

Ví dụ

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 trên <SPasswordField> gắn với property value và lắng nghe DOM event input.

<SPasswordField v-model="value" />

tương đương với:

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

Props

Prop	Kiểu	Mô tả
autocomplete	"current-password" | "new-password" | "on" | "off" | "shipping current-password" | "shipping new-password" | "billing current-password" | "billing new-password"	Gợi ý về nội dung dự kiến của trường. Khi đặt thành on (mặc định), thuộc tính này cho biết trường nên hỗ trợ tự động điền, nhưng bạn không có thêm thông tin ngữ nghĩa nào về nội dung dự kiến. Khi đặt thành off, bạn cho biết trường này chứa thông tin nhạy cảm, hoặc nội dung không bao giờ được lưu, như mã dùng một lần. Ngoài ra, bạn có thể cung cấp giá trị mô tả loại dữ liệu cụ thể mà bạn muốn được nhập vào trường này khi tự động điền.
defaultValue	string	Giá trị mặc định của trường.
details	any	Văn bản bổ sung cung cấp ngữ cảnh hoặc hướng dẫn cho trường. Văn bản này được hiển thị cùng với trường và nhãn của nó để cung cấp thêm thông tin hoặc chỉ dẫn cho người dùng. Văn bản này cũng được cung cấp cho người dùng trình đọc màn hình.
disabled	boolean	Vô hiệu hóa trường, không cho phép bất kỳ tương tác nào.
error	any	Báo lỗi cho người dùng. Trường sẽ được áp dụng kiểu hiển thị riêng để thông báo các vấn đề cần được giải quyết ngay.
id	string	Định danh duy nhất của phần tử.
label	any	Nội dung dùng làm nhãn của trường.
labelAccessibilityVisibility	"visible" | "exclusive"	Thay đổi khả năng hiển thị của nhãn của component. - visible: nhãn hiển thị với mọi người dùng. - exclusive: nhãn bị ẩn về mặt thị giác nhưng vẫn nằm trong cây trợ năng (accessibility tree).
maxLength	number	Chỉ định số ký tự tối đa được phép.
minLength	number	Chỉ định số ký tự tối thiểu được phép.
name	string	Định danh cho trường, là duy nhất trong form chứa nó gần nhất.
placeholder	string	Gợi ý ngắn mô tả giá trị mong đợi của trường.
readOnly	boolean	Người dùng không thể chỉnh sửa trường. Trường vẫn có thể nhận focus và sẽ được trình đọc màn hình thông báo.
required	boolean	Trường có bắt buộc phải có giá trị hay không. Yêu cầu này bổ sung giá trị ngữ nghĩa cho trường, nhưng sẽ không tự động hiển thị lỗi. Nếu muốn hiển thị lỗi khi trường này trống, bạn có thể dùng thuộc tính error.
value	string	Giá trị hiện tại của trường. Nếu bỏ qua, trường sẽ trống.

Events

Event	Kiểu
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event

Lắng nghe các event này bằng listener dạng @blur trên <SPasswordField>.

Slots

Slot	Mô tả
details
error