SDropZone <s-drop-zone>

드래그 앤 드롭이나 파일 선택기로 파일을 받는 파일 업로드 영역입니다. SDropZone은(는) Shopify Polaris <s-drop-zone> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

• accept로 파일 제한을 명시하세요. drop zone이 받는 파일 형식에 명확한 제한을 둡니다.
• droprejected를 처리하고 도움이 되는 메시지를 보여 주세요. 파일이 검증에 실패하면 이벤트를 수신해 판매자에게 무엇이 잘못되었는지 알려 줍니다.
• 처리 중에는 disabled를 고려하세요. 업로드 중에 drop zone을 비활성화하면 판매자가 그 사이에 파일을 더 추가하는 것을 막을 수 있습니다.

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

전체 가이드는 <s-drop-zone>에 대한 Shopify 모범 사례(영어)를 참고하세요.

예시

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 event를 수신합니다.

<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 형식의 리스너로 이 events를 수신하세요.

Slots

Slot	설명
default	드롭 존 컨테이너 안에 포함할 콘텐츠