vue 组件层次过多
视觉稳定 (vue-nestable)
Drag & drop hierarchical list made as a vue component.
拖放成为vue组件的分层列表。
目标 (Goals)
A simple vue component to create a draggable list to customizable items
一个简单的vue组件,用于创建可自定义项目的可拖动列表
Reorder items by dragging them above an other item
通过将项目拖到另一个项目上方来对其重新排序
Intuitively nest items by dragging right
通过向右拖动直观地嵌套项目
Fully customizable, ships with no css
完全可定制,不带CSS
Everything is configurable: item identifier, max nesting level, threshold for nesting
一切都是可配置的:项目标识符,最大嵌套级别,嵌套阈值
安装 (Installation)
Install the plugin:
安装插件:
npm install --save vue-nestable
Add the plugin into your app:
将插件添加到您的应用中:
import Vue from 'vue'
import VueNestable from 'vue-nestable'
Vue.use(VueNestable)
简单的例子 (Simple Example)
You only need two components: vue-nestable
which renders the list and vue-nestable-handle
which indicates the are the user can drag the item by.
您只需要两个组件: vue-nestable
呈现列表和vue-nestable-handle
指示用户可以拖动项目的位置。
It can't get any easier than this.
没有比这更容易的了。
<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>
进阶范例 (Advanced Example)
vue-nestable is extremly customizable. For example you don't have to make the entire item draggable. Instead you can just add an icon by which the item can be dragged. We also limited the nesting level to 2 in this example.
vue-nestable非常可定制。 例如,您不必使整个项目都可拖动。 相反,您可以仅添加一个图标,通过该图标可以拖动该项目。 在此示例中,我们还将嵌套级别限制为2。
<template>
<vue-nestable
v-model="nestableItems"
:max-depth="2">
<template slot-scope="{ item }">
<!-- Handler -->
<vue-nestable-handle :item="item">
☰
</vue-nestable-handle>
<!-- Content -->
<span>Item :: {{ item.text }}</span>
</template>
</vue-nestable>
</template>
道具 (Props)
Property | Type | Default | Description |
---|---|---|---|
value | Array | [ ] | Array of objects to be used in the list. Important: Each item must have a unique key by which it can be identified. By default the key is assumed to be named id but you can change it by setting the keyProp property. |
threshold | Number | 30 | Amount of pixels by which the mouse must be move horizontally before increasing/decreasing level (nesting) of current element. |
maxDepth | Number | 10 | Maximum available level of nesting. Setting this to 0 will prevent dragging altogether. |
group | String or Number | random String | Different group numbers may be passed if you have more than one nestable component on a page and want some extra styles for portal instances. |
keyProp | String | 'id' | Optional name of property with identifier. |
childrenProp | String | 'children' | Optional name of property with children. |
属性 | 类型 | 默认 | 描述 |
---|---|---|---|
值 | 数组 | [] | 列表中要使用的对象数组。 重要提示:每个项目都必须具有唯一的密钥才能识别。 默认情况下,假定键名为id 但是您可以通过设置keyProp 属性来更改它。 |
阈 | 数 | 30 | 在增加/减少当前元素的水平(嵌套)之前,鼠标必须水平移动的像素数量。 |
maxDepth | 数 | 10 | 最大可用嵌套级别。 将该值设置为0将防止完全拖动。 |
组 | 字符串或数字 | 随机字符串 | 如果页面上有多个可嵌套组件,并且希望门户网站实例具有某些其他样式,则可以传递不同的组号。 |
keyProp | 串 | 'ID' | 带有标识符的属性的可选名称。 |
childrenProp | 串 | '儿童' | 有孩子的财产的可选名称。 |
插槽 (Slots)
Slot Name | Description |
---|---|
placeholder | Lets you define a custom template that is used when no elements are in the list |
插槽名称 | 描述 |
---|---|
占位符 | 可让您定义一个自定义模板,该模板在列表中没有元素时使用 |
大事记 (Events)
Event | Parameters | Description |
---|---|---|
input | value | triggered whenever the list changes |
事件 | 参量 | 描述 |
---|---|---|
输入 | 值 | 列表更改时触发 |
翻译自: https://vuejsexamples.com/a-drag-drop-hierarchical-list-made-as-a-vue-component/
vue 组件层次过多