可排序列表是网页开发中最令人沮丧的部分之一. 网页最初不是用拖放的想法创建的,即使在HTML5中添加了原生拖放的支持,仍然有很多东西要连接。
安装
从 NPM 或 Yarn 安装 Vue.Draggable:
1# Yarn
2$ yarn add vuedraggable
3
4# NPM
5$ npm install vuedraggable --save
现在,任何组件都可以从 vuedraggable 导入可拖动组件。
使用
要使列表可排序,只需将任何元素包装到可拖放的组件中(通常使用v-for,但您也可以执行单个元素)。
draggable 还可以采用 v 模型绑定来更新包含相关数据的数组。
1[label ExampleComponent.vue]
2<template>
3 <div>
4 <h2>Draggable Wrapper</h2>
5 <draggable v-model="exampleList">
6 <div v-for="text in exampleList" :key="text">{{text}}</div>
7 </draggable>
8 </div>
9</template>
10
11<script>
12import draggable from 'vuedraggable';
13
14export default {
15 components: {
16 draggable
17 },
18
19 data() {
20 return {
21 exampleList: [
22 'Item 1',
23 'Item 2',
24 'Item 3',
25 'Item 4',
26 'Item 5'
27 ]
28 }
29 }
30}
31</script>
Voilà! 列表是可排序的! 你可以拖放列表项目周围任何你想要的和变化将反映在数组。
Props & 事件
主持人: **
- 值 (v-model capable): 数组 - 输入数组为组件. 它是不可变的,所以它被重建为每一个变化 *列表: 数组 - 替代值,但更新数组而不重建它. (通过 Array.splice())
- 选项: 对象 - 包含任何有效的选项为 Sortable的对象。
- 元素: 字符串 - 可拖动组件使用的包装元素. 默认为 div.
- 克隆: 函数(VNode) -> VNode - 使用的方法来克隆一个 VNode 当克隆选项存在时。 相当
**事件:**开始,添加,删除,更新,结束,选择,排序,过滤,克隆。
使用Vuex
当使用 Vue.Draggable 与 Vuex 一起使用时,请为您的数组使用一个计算属性,该属性通过加载器从商店中获取数组,并在设置时发生突变:
1computed: {
2 exampleList: {
3 get() {
4 return this.$store.state.exampleList
5 },
6
7 set(val) {
8 this.$store.commit('setExampleList', val)
9 }
10 }
11}
附加
- Vue.Draggable在过渡中运行良好,只需确保可拖动元素直接包装过渡或过渡组元素。
- 如果您的列表默认情况下包含 0 个元素,请确保可拖动元素创建的元素具有足够高的风格,以便成为有效的降落目标。
这就是它所拥有的全部!
现在,我已经在一些个人项目中添加了 home-spun drag-and-drop 功能,现在我要用 Vue.Draggable 来替代那些丑陋的实现。