VueUse useDropZone 创建一个文件拖拽区,用户可以在电脑选中文件(可以选中多个)并拖动到该区域,你可以获取到这个文件的对象。
<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
}
//初始化useDropZone
const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
</script>
<template>
<div ref="dropZoneRef">
拖动文件这里试试看
</div>
</template>
例子