跳到主要内容

useDropZone

分类
导出大小
1.13 kB
上次更改
7 个月前

创建一个可以放置文件的区域。

警告

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

演示

将文件从您的电脑拖放到拖放区

通用拖放区
isOverDropZone: false
图片拖放区
isOverDropZone: false

用法

vue
<script setup lang="ts">
import { 
useDropZone
} from '@vueuse/core'
import {
ref
} from 'vue'
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>

类型声明

显示类型声明
ts
export interface UseDropZoneReturn {
  
files
:
ShallowRef
<File[] | null>
isOverDropZone
:
ShallowRef
<boolean>
} export interface UseDropZoneOptions { /** * Allowed data types, if not set, all data types are allowed. * Also can be a function to check the data types. */
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
青椒肉丝
奥斯塔普·布雷欣
马泽尔
布莱恩·K·陈
Anthony Fu
丹·戈辛加
巴布-ch
泰科
迭戈·帕斯夸尔
getname1997
尼奥·傅
卢卡·巴吉奇
aki77
马蒂亚斯·斯蒂勒
朱利安·马丁

更新日志

v13.1.0
21fa6 - 修复:允许将 document 作为目标 (#4681)
v12.8.0
7432f - feat(types): 废弃 MaybeRefMaybeRefOrGetter,转而使用 Vue 的原生类型 (#4636)
v12.3.0
b01cf - 修复:拖放多个文件时单独验证所有文件类型 (#4325)
v12.1.0
df363 - 修复:更新类型以允许只读数组参数 (#4319)
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)
v11.2.0
1d661 - 修复:移除文件种类限制 (#4305)
v11.1.0
3b94d - 功能:添加 `multiple` 属性以控制多文件拖放 (#4227)
v11.0.2
1c849 - 修复:确保即使没有 `onDrop` 回调,`files` ref 也能更新 (#4168)
v10.7.1
15a38 - 修复(useDropzone):避免循环引用 (#3683)
v10.7.0
8f42a - 修复:文件类型过滤器的修复 (#3540)
v10.6.0
3f3f1 - 功能:添加 `dataTypes` 选项 (#3471)
v10.2.1
6d4ef - 功能:将文件作为 ref 暴露
17d8d - 功能:暴露更多钩子

根据 MIT 许可证发布。