SDropZone <s-drop-zone>

Một vùng tải tệp lên, nhận tệp bằng kéo thả hoặc từ hộp chọn tệp. SDropZone là Vue 3 wrapper có type cho web component <s-drop-zone> của Shopify Polaris.

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

Best practices

• Nêu giới hạn file bằng accept. Đặt giới hạn rõ ràng về loại file mà drop zone chấp nhận.
• Xử lý droprejected bằng một thông báo hữu ích. Khi file không vượt qua kiểm tra, hãy lắng nghe event này và cho người bán biết điều gì đã sai.
• Cân nhắc disabled trong lúc xử lý. Tắt drop zone trong lúc upload giúp người bán không thêm file khác trong thời gian đó.

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

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

Ví dụ

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

<SDropZone v-model="value" />

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

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

Props

Prop	Kiểu	Mô tả
accept	string	Chuỗi biểu thị các loại tệp được drop zone chấp nhận. Chuỗi này là danh sách phân tách bằng dấu phẩy gồm các bộ chỉ định loại tệp duy nhất, mỗi bộ có thể là một trong các dạng sau: - Phần mở rộng tệp bắt đầu bằng ký tự dấu chấm (".") (ví dụ .jpg, .pdf, .doc) - Chuỗi MIME type hợp lệ không có phần mở rộng Nếu bỏ qua, mọi loại tệp đều được chấp nhận.
accessibilityLabel	string	Nhãn mô tả mục đích hoặc nội dung của mục. Khi được đặt, nhãn sẽ được đọc cho người mua dùng công nghệ hỗ trợ và cung cấp thêm ngữ cảnh cho họ.
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.
files	readonly File[]	Mảng các đối tượng File biểu thị các tệp mà người dùng đang chọn. Thuộc tính này chỉ đọc và không thể sửa trực tiếp. Để xóa các tệp đã chọn, hãy đặt prop value thành chuỗi rỗng hoặc null.
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).
multiple	boolean	Có cho phép chọn hoặc thả nhiều file cùng lúc hay không.
name	string	Định danh cho trường, là duy nhất trong form chứa nó gần nhất.
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	Chuỗi biểu thị đường dẫn đến (các) tệp đã chọn. Nếu chưa chọn tệp nào, giá trị là chuỗi rỗng (""). Khi người dùng chọn nhiều tệp, giá trị biểu thị tệp đầu tiên trong danh sách các tệp họ đã chọn. Giá trị luôn là tên tệp có tiền tố "C:\fakepath", đây không phải đường dẫn thật của tệp.

Events

Event	Kiểu
change	Event
droprejected	CustomEvent
input	Event

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

Slots

Slot	Mô tả
default	Nội dung đặt bên trong container của drop zone