Vue.js的可拖动层次列表– vue-nestable

Vue.js的可拖动层次列表– vue-nestable
插件名称 vue-nestable
发布时间 2020年7月15日
插件作者 rhwilr

Vue.js的功能强大的可拖动层次列表组件。

变更日志:

v2.6.0(2020年8月27日)

  • 将过时的Event.srcElement替换为Event.target。

特征:

  • 通过将项目拖到另一个项目上方来对其重新排序
  • 通过向右拖动直观地嵌套项目
  • 完全可定制,不带CSS
  • 一切都是可配置的:项目标识符,最大嵌套级别,嵌套阈值

安装和下载:

# NPM
$ npm install vue-nestable --save

在您的应用中使用插件:

import Vue from 'vue'
import VueNestable from 'vue-nestable'

Vue.use(VueNestable)

如果您愿意,也可以按需导入组件:

import { VueNestable, VueNestableHandle } from 'vue-nestable'

export default {
  components: {
    VueNestable,
    VueNestableHandle
  }
  ...
}

您只需要两个组件:vue-nestable呈现列表和 vue-nestable-handle指示用户可以拖动项目的区域。

重要说明:每个项目都必须具有唯一的id属性,并且必须是有效的CSS类名称。它不能包含:,.;或其他特殊字符是一个CSS类名无效。

<template>

  <vue-nestable v-model="nestableItems">
    <vue-nestable-handle
      slot-scope="{ item }"
      :item="item">
      {{ item.text }}
    </vue-nestable-handle>
  </vue-nestable>

</template>

<script type="text/babel">
export default {
  data () {
    return {
      nestableItems: [
        {
          id: 0,
          text: 'Andy'
        }, {
          id: 1,
          text: 'Harry',
          children: [{
            id: 2,
            text: 'David'
          }]
        }, {
          id: 3,
          text: 'Lisa'
        }
      ]
    }
  }
}
</script>