VueUse useDropZone 创建一个文件拖拽区

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>

在线例子

例子