Vue拖拽排序组件Vue-Slicksort解读

下面是详细讲解“Vue拖拽排序组件Vue-Slicksort解读”的完整攻略。

概述

Vue-Slicksort 是一个可拖拽排序组件，其支持排序项的拖拽、交换、插入、删除之类的操作，非常适用于管理后台等需要排序功能的场景。

Vue-Slicksort 的主要特点是高度可定制和易于配置。它封装了一个 Drag and Drop 库，可以直接应用在 Vue.js 2.x 项目中，不需要依赖其他库。

安装

你可以通过以下方式安装 Vue-Slicksort：

# 使用 npm
npm install vue-slicksort --save

# 使用 yarn
yarn add vue-slicksort

使用

下面是 Vue-Slicksort 的使用示例：

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

<script>
import { SlickList, SlickItem } from 'vue-slicksort'

export default {
  name: 'MyComponent',
  components: {
    SlickList,
    SlickItem
  },
  data () {
    return {
      items: ['item1', 'item2', 'item3', 'item4', 'item5']
    }
  }
}
</script>

上面代码中，我们通过 npm install vue-slicksort --save 安装了 Vue-Slicksort，然后在组件内引入了 SlickList 和 SlickItem 组件，接着可以通过 v-for 循环渲染 SlickItem 组件，创建拖拽排序列表。

示例

示例一：基本用法

下面是一个非常简单的基本用法示例：

<template>
  <slick-list @end="onEnd">
    <slick-item v-for="(item, index) in items" :key="index">{{ item }}</slick-item>
  </slick-list>
</template>

<script>
import { SlickList, SlickItem } from 'vue-slicksort'

export default {
  name: 'BasicDemo',
  components: {
    SlickList,
    SlickItem
  },
  data () {
    return {
      items: ['item1', 'item2', 'item3', 'item4', 'item5']
    }
  },
  methods: {
    onEnd (indexes) {
      console.log(indexes)
    }
  }
}
</script>

上面代码中，我们给 SlickList 组件绑定了一个 end 事件监听器，并且在 end 事件内部打印了拖拽排序之后的索引结果。每当我们在拖拽排序列表中拖动一个元素时，都会触发一次 end 事件。

示例二：横向排序

如果你想要创建一个横向排序的列表，你需要指定 direction 属性为 horizontal，如下所示：

<template>
  <slick-list :direction="'horizontal'">
    <slick-item v-for="(item, index) in items" :key="index">{{ item }}</slick-item>
  </slick-list>
</template>

<script>
import { SlickList, SlickItem } from 'vue-slicksort'

export default {
  name: 'HorizontalDemo',
  components: {
    SlickList,
    SlickItem
  },
  data () {
    return {
      items: ['item1', 'item2', 'item3', 'item4', 'item5']
    }
  }
}
</script>

上面代码中，我们在 SlickList 组件上指定了 direction 属性为 horizontal，从而实现了横向排序的效果。