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>

在线例子

例子