useDropZone

创建一个可以删除文件的区域。

¥Create a zone where files can be dropped.

警告

由于 Safari 浏览器的限制，文件类型验证只能在 drop 事件期间进行，而不能在 drag 事件期间进行。因此，在 Safari 中，无论文件类型如何，在拖拽操作过程中，isOverDropZone 的值始终为 true。

¥Due to Safari browser limitations, file type validation is only possible during the drop event, not during drag events. As a result, the isOverDropZone value will always be true during drag operations in Safari, regardless of file type.

示例

源代码playground (beta)

Drop files from your computer on to drop zones

General DropZone

isOverDropZone: false

Image DropZone

isOverDropZone: false

用法

¥Usage

<script setup lang="ts">
import { useDropZone } from '@vueuse/core'

const dropZoneRef = ref<HTMLDivElement>()

function onDrop(files: File[] | null) {
  // called when files are dropped on zone
}

const { isOverDropZone } = useDropZone(dropZoneRef, {
  onDrop,
  // specify the types of data to be received.
  dataTypes: ['image/jpeg'],
  // control multi-file drop
  multiple: true,
  // whether to prevent default behavior for unhandled events
  preventDefaultForUnhandled: false,
})
</script>

<template>
  <div ref="dropZoneRef">
    Drop files here
  </div>
</template>