vue 组件层次过多_作为vue组件的拖放层次结构列表

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

  一切都是可配置的：项目标识符，最大嵌套级别，嵌套阈值

View Demo 查看演示 Download Source 下载源

安装 (Installation)

1. Install the plugin:

   安装插件：

npm install --save vue-nestable

1. 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 组件层次过多