Skip to content

useDropZone

类别
导出体积
1.13 kB
上次更改
6 months ago

创建一个可接收文件拖放的区域。

WARNING

由于 Safari 浏览器的限制,文件类型验证仅在放置事件期间可能,而不是在拖动事件中。因此,在 Safari 的拖动操作期间,isOverDropZone 值将始终为 true,无论文件类型如何。

示例

将文件从您的计算机拖放到放置区

通用拖放区域
是否在拖放区域内: false
图片拖放区域
是否在图片拖放区域内: false

用法

vue
<script setup lang="ts">
import { 
useDropZone
} from '@vueuse/core'
import {
ref
} from 'vue'
const
dropZoneRef
=
ref
<HTMLDivElement>()
function
onDrop
(
files
: File[] | null) {
// 当文件被拖放到区域时调用 } const {
isOverDropZone
} =
useDropZone
(
dropZoneRef
, {
onDrop
,
// 指定要接收的数据类型。
dataTypes
: ['image/jpeg'],
// 多文件拖放控制
multiple
: true,
// 是否阻止未处理事件的默认行为
preventDefaultForUnhandled
: false,
}) </script> <template> <
div
ref
="
dropZoneRef
">
拖放文件到这里 </
div
>
</template>

类型声明

ts
export interface UseDropZoneReturn {
  
files
:
ShallowRef
<File[] | null>
isOverDropZone
:
ShallowRef
<boolean>
} export interface UseDropZoneOptions { /** * 允许的数据类型,如果未设置,则允许所有数据类型。 * 也可以是检查数据类型的函数。 */
dataTypes
?:
|
MaybeRef
<readonly string[]>
| ((
types
: readonly string[]) => boolean)
onDrop
?: (
files
: File[] | null,
event
: DragEvent) => void
onEnter
?: (
files
: File[] | null,
event
: DragEvent) => void
onLeave
?: (
files
: File[] | null,
event
: DragEvent) => void
onOver
?: (
files
: File[] | null,
event
: DragEvent) => void
/** * Allow multiple files to be dropped. Defaults to true. */
multiple
?: boolean
/** * Prevent default behavior for unhandled events. Defaults to false. */
preventDefaultForUnhandled
?: boolean
} export declare function
useDropZone
(
target
:
MaybeRefOrGetter
<HTMLElement | Document | null | undefined>,
options
?: UseDropZoneOptions | UseDropZoneOptions["onDrop"],
): UseDropZoneReturn

源码

源码演示文档

贡献者

一纸忘忧
Anthony Fu
IlyaL
青椒肉丝
Ostap Brehin
Mazel
briankchan
Anthony Fu
danngossinga
babu-ch
Tycho
Diego Pascual
getname1997
Neo Fu
Luka Bagic
aki77
Matthias Stiller
Julien Martin

更新日志

21fa6 - fix: Allow passing document as target (#4681)
7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)
b01cf - fix: validate all file types individually when dropping multiple files (#4325)
df363 - fix: update type to allow readonly array param (#4319)
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
1d661 - fix: remove file kind restriction (#4305)
3b94d - feat: add multiple prop to control multi-file drop (#4227)
1c849 - fix: ensure files ref is updated even without onDrop callback (#4168)
15a38 - fix(useDropzone): avoid circular reference (#3683)
8f42a - fix: fix file types filter (#3540)
3f3f1 - feat: add dataTypes option (#3471)
6d4ef - feat: expose files as ref
17d8d - feat: expose more hooks