vuedraggable vue3怎么使用

vuedraggable是一个基于Vue.js的拖拽排序组件，用于实现可拖拽的列表或表格。在Vue 3中，使用vuedraggable需要进行以下步骤：

1. 首先，确保你已经安装了Vue 3和vuedraggable。可以通过npm或yarn进行安装：

npm install vue@next vuedraggable

或

yarn add vue@next vuedraggable

2. 在你的Vue应用程序的入口文件（通常是main.js或app.js）中，导入Vue和vuedraggable，并将它们注册为全局组件：

import { createApp } from 'vue';
import App from './App.vue';
import VueDraggable from 'vuedraggable';

const app = createApp(App);
app.component('VueDraggable', VueDraggable);
app.mount('#app');

3. 在你的Vue组件中，可以使用`<vue-draggable>`标签来包裹需要拖拽排序的元素。例如：

<template>
  <div>
    <h2>可拖拽的列表：</h2>
    <vue-draggable v-model="list">
      <div v-for="item in list" :key="item.id">{{ item.name }}</div>
    </vue-draggable>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
};
</script>

以上就是使用vuedraggable在Vue 3中实现拖拽排序的基本步骤。