vue自由拖拽vue3-dnd(三)

vue 自由拖拽vue3-dnd(三)-组件

接下来就进入正题了，该如何使用，请看以下说明：

DndProvider

DndProvider 组件为您的应用程序提供 Vue3 DnD 功能。它必须通过backend这个prop注入一个Backend。

一般我们在App.vue文件中使用它。

用法

PC 端

<script setup lang="ts">
import { DndProvider } from 'vue3-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'
</script>

<template>
  <DndProvider :backend="HTML5Backend">
    <!-- Your Drag-and-Drop Application -->
  </DndProvider>
</template>

移动端

<script setup lang="ts">
import { DndProvider } from 'vue3-dnd'
import { TouchBackend } from 'react-dnd-touch-backend'
</script>

<template>
  <DndProvider :backend="TouchBackend">
    <!-- Your Drag-and-Drop Application -->
  </DndProvider>
</template>

Props

参数	说明	类型	是否必填
backend	一个 React DnD 的 Backend	Backend	是
context	用于配置 Backend 的上下文对象; 这取决于 Backend 实现。	object	否
options	用于配置 Backend 的选项对象; 这取决于 Backend 实现。	object	否

DragPreviewImage

将 HTML Image 元素呈现为拖动预览的组件。

用法

<script lang="ts" setup>
import { DragPreviewImage, useDrag } from 'vue3-dnd'
const [collect, drag, dragPreview] = useDrag(() => ({
  type: 'Box',
}))
</script>

<template>
    <DragPreviewImage :connect="dragPreview" src="house_dragged.png" />
    <div :ref="drag">🏠</div>
</template>

Props

参数	说明	类型	是否必填
src	图片的src	string	是
connect	dragPreview连接器	function	是