avue-draggable的使用手册

`avue-draggable`是一个Vue.js的插件，它能够让你轻松地实现拖拽功能。下面是该插件的使用手册：

### 安装

你可以使用npm或yarn来安装`avue-draggable`：

# 使用npm安装
npm install avue-draggable --save

# 使用yarn安装
yarn add avue-draggable

### 引入

在Vue.js应用中，你需要在组件中引入`avue-draggable`插件：

import draggable from 'avue-draggable'

export default {
  ...
  components: {
    draggable
  },
  ...
}

### 使用

在组件中使用`draggable`插件：

<template>
  <div>
    <draggable v-model="list">
      <div v-for="(item, index) in list" :key="index">{{ item }}</div>
    </draggable>
  </div>
</template>

在上面的代码中，`v-model`指令用于双向数据绑定，它将`draggable`插件中的`list`属性和组件中的列表数据进行了绑定。`v-for`指令用于循环渲染列表数据，而`key`属性则用于标识每个列表项。

### API

`avue-draggable`插件提供了多个API，以下是一些常用的API：

#### `v-model`

`v-model`指令用于双向数据绑定，它将`draggable`插件中的列表数据和组件中的数据进行了绑定。当你拖拽列表项时，`list`属性将会自动更新，从而实现了数据的双向绑定。

<draggable v-model="list">
  ...
</draggable>

#### `transition-duration`

`transition-duration`属性用于设置拖拽动画的持续时间（以毫秒为单位）。默认值为`200`毫秒。

<draggable v-model="list" :transition-duration="300">
  ...
</draggable>

#### `transition-mode`

`transition-mode`属性用于设置拖拽动画的模式。可选值为`out-in`（默认值）和`in-out`。

<draggable v-model="list" :transition-mode="'in-out'">
  ...
</draggable>

#### `ghost-class`

`ghost-class`属性用于设置拖拽时占位符的样式。

<draggable v-model="list" :ghost-class="'my-ghost-class'">
  ...
</draggable>

#### `handle`

`handle`属性用于设置拖拽时的手柄元素。只有当拖拽手柄元素时，列表项才会被拖拽。

<draggable v-model="list" handle=".my-handle">
  <div v-for="(item, index) in list" :key="index">
    <div class="my-handle">拖拽手柄</div>
    <div class="my-content">{{ item }}</div>
  </div>
</draggable>

#### `clone`

`clone`属性用于设置是否复制拖拽元素。默认值为`false`，即不复制。

<draggable v-model="list" :clone="true">
  ...
</draggable>

#### `tag`

`tag`属性用于设置拖拽元素的标签名。默认值为`div`。

<draggable v-model="list" :tag="'ul'">
  ...
</draggable>

### 总结

`avue-draggable`是一个强大的Vue.js插件，它可以让你轻松地实现拖拽功能。在使用这个插件时，你需要先安装它，然后在组件中引入它，最后在组件中使用它即可。此外，`avue-draggable`还提供了多个API，你可以根据自己的需求来选择使用。