vueuse 中文文档

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>

在线例子

例子

Catalog
vueuse 入门 State 状态 Elements 元素 useActiveElement 焦点元素 useDocumentVisibility 是否可见 useDraggable 拖动元素 useDropZone 文件拖拽区 useElementBounding 获取元素边界 useElementSize 元素大小 useElementVisibility 元素是否可见 useIntersectionObserver 元素是否可见 useMouseInElement 鼠标hover事件 useMutationObserver 监视 DOM 变动 useParentElement 获取父元素 useResizeObserver 监控元素大小 useWindowFocus 窗口焦点状态 useWindowScroll 滚动条位置 useWindowSize 获取窗口大小 Browser 浏览器 Sensors 感应监测