SL-VUE树 (sl-vue-tree)
Customizable draggable tree component for Vue.js
Vue.js的可定制的可拖动树组件
安装 (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事件
例: (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/