美文网首页
vue使用拖拽组件

vue使用拖拽组件

作者: 石木君 | 来源:发表于2019-08-02 11:07 被阅读0次

vue-draggable 学习和使用

组件实例

Vue.Draggable

Vue.Draggable学习总结

嵌套代码:

<template>
  <draggable class="dragArea" tag="ul" :list="tasks" :group="{ name: 'g1' }">
    <li v-for="el in tasks" :key="el.name">
      <p>{{ el.name }}</p>
      <nested-draggable :tasks="el.tasks"/>
    </li>
  </draggable>
</template>
<script>
import draggable from 'vuedraggable';

export default {
  props: {
    tasks: {
      required: true,
      type: Array,
    },
  },
  components: {
    draggable,
  },
  name: 'nested-draggable',
};
</script>
<style scoped>
.dragArea {
  min-height: 50px;
  outline: 1px dashed;
}
</style>

调用代码(递归组件)

data() {
   return {
      list: [
        {
          name: 'task1',
          tasks: [
            { name: 'task 2', tasks: [] },
          ],
        },
        {
          name: 'task 3',
          tasks: [
            { name: 'task 4', tasks: [] },
          ],
        },
        {
          name: 'task 5',
          tasks: [],
        },
      ],
   };
}

直接这样用就好了

  nested-draggable(:tasks="list")

相关文章

网友评论

      本文标题:vue使用拖拽组件

      本文链接:https://www.haomeiwen.com/subject/mjnkdctx.html