SDropZone <s-drop-zone>

通过拖放或文件选择器接收文件的上传区域。 SDropZone 是 Shopify Polaris <s-drop-zone> web component 的带类型 Vue 3 wrapper。

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

最佳实践

• 用 accept 说明文件限制。 为拖放区接受的文件类型设置明确的限制。
• 处理 droprejected 并给出有帮助的消息。 当文件未通过验证时，监听该事件并告诉商家出了什么问题。
• 处理期间考虑使用 disabled。 上传期间禁用拖放区，可以防止商家在此期间继续添加文件。

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

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

示例

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

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

<SDropZone v-model="value" />

等价于：

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

Props

Prop	类型	说明
accept	string	表示拖放区域可接受的文件类型的字符串。该字符串是以逗号分隔的唯一文件类型说明符列表，每项可以是以下之一： - 以句点（"."）开头的文件扩展名（例如 .jpg、.pdf、.doc） - 不带扩展名的有效 MIME 类型字符串 如果省略，则接受所有文件类型。
accessibilityLabel	string	描述条目用途或内容的标签。设置后，会向使用辅助技术的买家朗读，为其提供更多上下文。
disabled	boolean	禁用字段，不允许任何交互。
error	any	向用户提示错误。字段会采用特定的样式处理，以传达必须立即解决的问题。
files	readonly File[]	表示用户当前所选文件的 File 对象数组。此属性为只读，无法直接修改。要清除所选文件，请将 value prop 设置为空字符串或 null。
label	any	用作字段标签的内容。
labelAccessibilityVisibility	"visible" | "exclusive"	更改组件标签的可见性。 - visible：标签对所有用户可见。 - exclusive：标签在视觉上隐藏，但仍保留在无障碍树中。
multiple	boolean	是否可以一次选择或拖放多个文件。
name	string	字段的标识符，在最近的外层表单内唯一。
required	boolean	字段是否需要填写值。此要求会为字段添加语义，但不会自动显示错误。如果希望在字段为空时显示错误，可以使用 error 属性。
value	string	表示所选文件路径的字符串。如果尚未选择文件，值为空字符串（""）。当用户选择了多个文件时，该值表示所选文件列表中的第一个文件。该值始终是带有 "C:\fakepath" 前缀的文件名，而不是文件的真实路径。

Events

Event	类型
change	Event
droprejected	CustomEvent
input	Event

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

Slots

Slot	说明
default	放置在拖放区域容器内的内容