vuedraggable的用法vue3
时间: 2024-03-08 09:44:20 浏览: 50
VueDraggable是一个基于Vue.js的拖拽排序组件,用于实现可拖拽的列表或表格。它可以帮助我们轻松地实现拖拽排序的功能。
在Vue 3中,使用VueDraggable的步骤如下:
1. 首先,安装VueDraggable。可以通过npm或yarn进行安装:
```
npm install vuedraggable
```
2. 在需要使用VueDraggable的组件中,引入VueDraggable:
```javascript
import { VueDraggable } from 'vuedraggable';
```
3. 在组件的template中使用VueDraggable组件,并绑定需要排序的数据:
```html
<template>
<div>
<vue-draggable v-model="list">
<div v-for="item in list" :key="item.id">{{ item.name }}</div>
</vue-draggable>
</div>
</template>
```
4. 在组件的data中定义需要排序的数据:
```javascript
export default {
data() {
return {
list: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
// ...
]
};
}
}
```
这样,就可以实现一个简单的拖拽排序功能了。