插件名称 | vue-nestable |
---|---|
发布时间 | 2020年7月15日 |
插件作者 | rhwilr |
Vue.js的功能强大的可拖动层次列表组件。
v2.6.0(2020年8月27日)
# 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>
官网:https://github.com/rhwilr/vue-nestable
演示:https://www.vue365.cn/code_demo.php?id=1380
GitHub下载:https://github.com/rhwilr/vue-nestable/archive/master.zip