VueUse中文文档useDropZone
创建一个可以放置文件的区域。
Create a zone where files can be dropped.
例子
文件放入放入区域
文件在放入区: false
Usage
html
<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)
</script>
<template>
<div ref="dropZoneRef">
Drop files here
</div>
</template>
<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)
</script>
<template>
<div ref="dropZoneRef">
Drop files here
</div>
</template>
Type Declarations
typescript
export interface UseDropZoneReturn {
isOverDropZone: Ref<boolean>
}
export declare function useDropZone(
target: MaybeComputedRef<HTMLElement | null | undefined>,
onDrop?: (files: File[] | null) => void
): UseDropZoneReturn
export interface UseDropZoneReturn {
isOverDropZone: Ref<boolean>
}
export declare function useDropZone(
target: MaybeComputedRef<HTMLElement | null | undefined>,
onDrop?: (files: File[] | null) => void
): UseDropZoneReturn