Vue.js的可定制的可拖动树组件

SL-VUE树 (sl-vue-tree)

Customizable draggable tree component for Vue.js

Vue.js的可定制的可拖动树组件

View demo 查看演示 Download Source 下载源

安装 (install)

npm i sl-vue-tree

npm i sl-vue-tree

快速开始 (Quick start)

<div id="app">
  <sl-vue-tree v-model="nodes"/>
</div>

<link rel="stylesheet" href="dist/sl-vue-tree-dark.css">
<script src="dist/sl-vue-tree.js"></script>

<script>

    var nodes = [
    {title: 'Item1', isLeaf: true},
    {title: 'Item2', isLeaf: true, data: { visible: false }},
    {title: 'Folder1'},
    {
      title: 'Folder2', isExpanded: true, children: [
        {title: 'Item3', isLeaf: true},
        {title: 'Item4', isLeaf: true}
      ]
    }
  ];

  new Vue({
    el: '#app',
    components: { SlVueTree },
    data: function () {
     return {
       nodes: nodes
     }
    }
  });
  
</script>

The value property is array of ISlTreeNodeModel nodes:

value属性是ISlTreeNodeModel节点的数组：

interface ISlTreeNodeModel<TDataType> {
    title: string;
    isLeaf?: boolean;
    children?: ISlTreeNodeModel<TDataType>[];
    isExpanded?: boolean;
    isSelected?: boolean;
    data?: TDataType; // any serializable user data
}

For convenience the component's events returns ISlTreeNode objects those actually are ISlTreeNodeModel with some computed props:

为了方便起见，组件的事件返回ISlTreeNode对象，这些对象实际上是带有一些计算道具的ISlTreeNodeModel ：

interface ISlTreeNode<TDataType> extends ISlTreeNodeModel<TDataType> {
    isFirstChild: boolean;
    isLastChild: boolean;
    isVisible: boolean;	// node is visible if the all of it's parents are expanded
    level: number; // nesting level
    ind: number; // index in the array of siblings 
    path: number[]; // path to node as array of indexes, for exaple [2, 0, 1] in example above is path to `Item4` 
    pathStr: string; // serialized path to node
    children: ISlTreeNode<TDataType>[];
}

You can get the list of ISlTreeNode from the computed slVueTree.nodes property

您可以从计算的slVueTree.nodes属性中获取ISlTreeNode的列表。

道具 (Props)

prop	type	default	description
value	ISlTreeNodeModel[]	[]	An array of nodes to show. Each node represented by ISlTreeNodeModel interface
allowMultiselect	Boolean	true	Disable or enable the multiselect feature
edgeSize	Number	3	Offset in pixels from top and bottom for folder-node element. While dragging cursor is in that offset, the dragging node will be placed before or after the folder-node instead to be placed inside the folder.
scrollAreaHeight	Number	70	Offset in pixels from top and bottom for the component element. While dragging cursor is in that area, the scrolling starts.
maxScrollSpeed	Number	20	The scroll speed is relative to the cursor position. Defines the max scroll speed.

Struts	类型	默认	描述
值	ISlTreeNodeModel []	[]	要显示的节点数组。 由ISlTreeNodeModel接口表示的每个节点
allowMultiselect	布尔型	真正	禁用或启用多选功能
edgeSize	数	3	文件夹节点元素的上下偏移量(以像素为单位)。 当拖动光标位于该偏移量中时，拖动节点将放置在文件夹节点之前或之后，而不是放置在文件夹内部。
scrollAreaHeight	数	70	组件元素的上下偏移量。 当拖动光标在该区域中时，开始滚动。
maxScrollSpeed	数	20	滚动速度是相对于光标位置的。 定义最大滚动速度。

计算道具 (Computed props)

prop	type	description
nodes	ISlTreeNode[]	List of nodes with some computed props. See ISlTreeNode interface.
cursorPosition	ICursorPosition	Represents the current cursor position that describes the action that will be applied to the dragged node while mouseup event. See ICursorPosition interface
selectionSize	Number	The count of selected nodes
isDragging	Boolean	True if nodes are dragging

Struts	类型	描述
节点	ISlTreeNode []	具有一些计算道具的节点列表。 请参见ISlTreeNode接口。
cursorPosition	光标位置	表示当前光标位置，该位置描述了mouseup事件时将应用于拖动节点的操作。 请参阅ICursorPosition界面
selectionSize	数	所选节点数
isDragging	布尔型	如果节点拖动则为真

interface ICursorPosition<TDataType> {
  node: ISlTreeNode<TDataType>;
  placement: 'before' | 'inside' | 'after';
}

大事记 (Events)

event	callback arguments	description
input	nodes: ISlTreeNodeModel[]	triggers for any changes for value property
select	selectedNodes: ISlTreeNode[], event: MouseEvent	triggers when a node has been selected/deselected
toggle	toggledNode: ISlTreeNode, event: MouseEvent	triggers when a node has been collapsed/expanded
drop	draggingNodes: ISlTreeNode[], position: ICursorPosition, event: MouseEvent	triggers when dragging nodes have been dropped
nodeclick	node: ISlTreeNode, event: MouseEvent	handle click event on node
nodedblclick	node: ISlTreeNode, event: MouseEvent	handle dblclick event on node
nodecontextmenu	node: ISlTreeNode, event: MouseEvent	handle contextmenu event on node

事件	回调参数	描述
输入	节点：ISlTreeNodeModel []	触发value属性的任何更改
选择	selectedNodes：ISlTreeNode []，事件：MouseEvent	在选择/取消选择节点时触发
拨动	toggledNode：ISlTreeNode，事件：MouseEvent	节点折叠/展开时触发
下降	draggingNodes：ISlTreeNode []，位置：ICursorPosition，事件：MouseEvent	拖放拖动节点时触发
nodeclick	节点：ISlTreeNode，事件：MouseEvent	处理节点上的click事件
nodedblclick	节点：ISlTreeNode，事件：MouseEvent	处理节点上的dblclick事件
节点上下文菜单	节点：ISlTreeNode，事件：MouseEvent	处理节点上的contextmenu事件

方法 (Methods)

method	description
getNode(path: number[]): ISlTreeNode	Find the node by using it's path
traverse(cb: (node: ISlTreeNode, nodeModel: ISlTreeNodeModel, siblings: ISlTreeNodeModel[]) => boolean)	Helpful method to traverse all nodes. The traversing will be stopped if callback returns false.
updateNode(path: number[], patch: Partial )	Update the node by using it's path
select(path: number[], addToSelection = false)	Select the node by using it's path
getNodeEl(): HTMLElement	Get the node HTMLElement by using it's path
getSelected(): ISlTreeNode[]	Get selected nodes
remove(paths: number[][])	Remove nodes by paths. For example .remove([[0,1], [0,2]])
getFirstNode(): ISlTreeNode	Get the first node in the tree
getLastNode(): ISlTreeNode	Get the last node in the tree
getNextNode(path: number[], filter?: (node: ISlTreeNode ) => boolean): ISlTreeNode ;	Get the next node. You can skip the next nodes by using filter
getPrevNode(path: number[], filter?: (node: ISlTreeNode ) => boolean): ISlTreeNode ;	Get the previous node. You can skip the previous nodes by using filter

方法	描述
getNode(path：number [])：ISlTreeNode	使用路径查找节点
traverse(cb：(node：ISlTreeNode，nodeModel：ISlTreeNodeModel，兄弟姐妹：ISlTreeNodeModel [])=>布尔值)	遍历所有节点的有用方法。 如果callback返回false则将停止遍历。
updateNode(path：number []，补丁：部分 )	使用节点的路径更新节点
select(path：number []，addToSelection = false)	使用路径选择节点
getNodeEl()：HTMLElement	通过使用路径获取节点HTMLElement
getSelected()：ISlTreeNode []	获取选定的节点
删除(路径：number [] [])	按路径删除节点。 例如.remove([[0,1], [0,2]])
getFirstNode()：ISlTreeNode	获取树中的第一个节点
getLastNode()：ISlTreeNode	获取树中的最后一个节点
getNextNode(path：number []，filter ?:(node：ISlTreeNode )=>布尔值)：ISlTreeNode ;	获取下一个节点。 您可以使用filter跳过下一个节点
getPrevNode(path：number []，filter ?:(node：ISlTreeNode )=>布尔值)：ISlTreeNode ;	获取上一个节点。 您可以使用filter跳过先前的节点

插槽 (Slots)

slot	context	description
title	ISlTreeNode	Slot for item title
toggle	ISlTreeNode	Slot for expand/collapse button
sidebar	ISlTreeNode	Sidebar content
draginfo	SlVueTree	Slot that follows the mouse cursor while dragging. By default shows the dragging nodes count.

插槽	语境	描述
标题	ISlTreeNode	项目标题的插槽
拨动	ISlTreeNode	扩展/折叠按钮的插槽
侧边栏	ISlTreeNode	侧边栏内容
draginfo	从树	拖动时跟随鼠标光标的插槽。 默认情况下显示拖动节点数。

例： (Example:)

handle keydow and keyup events via getNextNode and getPrevNode methods

通过getNextNode和getPrevNode方法处理keydow和keyup事件

demo

演示

例： (Example:)

add a folder or item icon via title slot

通过title栏添加文件夹或项目图标

<sl-vue-tree v-model="nodes">
    <template slot="title" slot-scope="{ node }">

      <span class="item-icon">
        <i class="fa fa-file" v-if="node.isLeaf"></i>
        <i class="fa fa-folder" v-if="!node.isLeaf"></i>
      </span>
    
      {{ node.title }}
      
    </template>
</sl-vue-tree>

例： (Example:)

select all nodes

选择所有节点

slVueTree.traverse((node, nodeModel, path) => {
    Vue.set(nodeModel, 'isSelected', true);
})

翻译自: https://vuejsexamples.com/customizable-draggable-tree-component-for-vue-js/