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>

copy success

移动端 

<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>

copy success

Props

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