在 Vue.js 中使用 Vue.Draggable 组件

可排序列表是网页开发中最令人沮丧的部分之一. 网页最初不是用拖放的想法创建的,即使在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 来替代那些丑陋的实现。

Published At
Categories with 技术
Tagged with
comments powered by Disqus