useDragLayer

useDragLayer函数提供了一种将你的组件作为拖动层连接到 DnD 的方法。

<script setup lang="ts">
import { useDragLayer } from 'vue3-dnd'

const collectedProps = useDragLayer(monitor => ({ 
      item: monitor.getItem(),
    }))
</script>

<template>
  <div>...</div>
</template>
copy success

参数

useDragLayer的参数是一个collect收集函数,它应该返回一个普通对象,并使你在组件中使用。

collect收集函数的参数是一个DragLayerMonitor对象,它提供了一些监视器的方法,以便你可以获取监视器的状态。collect函数的类型如下:

(monitor: DragLayerMonitor) => (void | object)
copy success

返回值

useDragLayer返回一个Ref对象,它是collect函数的返回值。

  • Collected Props - Ref<object>
    • 它是一个Ref对象,它的value指向collect函数的返回值。