he-tree-vue

# API

# Base Tree

# props

# value

  • Type: TreeData, required
  • Detail: The data passed to tree.
  • Example: [{text: 'node 1'}, {text: 'node 2', children: [{text: 'node 2-1'}]}]

# indent

  • Type: Number, default: 20
  • Detail: Indentation, unit is px.

# rtl

  • Type: boolean
  • Detail: Support right to left display and drag.

# rootNode

  • Type: Node, default: {}
  • Detail: The virtual root node of the tree. You can add options to root node by it.

# data

# trees

  • Type: {tree._uid: tree}
  • Detail: All the tree's vm instance that currently exist.

# treeClass

  • Type: String
  • Detail: Add class name to the top level of the tree. When using extends or mixins, you can customize the top level class without changing the template.

# treeId

  • Type: String
  • Detail: Random string. Available after mounted.

# computed

# treeData

# methods

# iteratePath

  • Type: (path: Path, [options: Object]) => Generator
    • options:
      • {Boolean} reverse
  • Detail: Iterate path.
  • Example:
    for (const {node, path} of this.iteratePath([0,0,0,1], {reverse: true})) {
  //
}

# getTreeVmByTreeEl

  • Type: (treeEl: HTMLElement) => Tree
  • Detail: Get vm by tree element.

# getAllNodesByPath

# getNodeByPath

# getPathByBranchEl

# getBranchElByPath

# getNodeByBranchEl

# getNodeParentByPath

# removeNodeByPath

# walkTreeData

# cloneTreeData

# getPureTreeData

# slots

# default slot

  • Type: scoped slot{node: Node, index: Number, path: Path, tree: Tree}
    • index
  • Default:

    {{node.text}}

  • Detail: Default slot, custom node render.
  • Example:
<div v-slot="{node, index, path, tree}">{{node.title}}</div>

# render hooks

Custom render. Applicable when using extends or mixins. Suitable for definition in data or methods.

# overrideSlotDefault

  • Type: ({node: Node, index: Number, path: Path, tree: Tree}, original) => JSX
    • {Function} original: return default render
  • Detail: Oerride default slot. Custom node render.
  • Example:
    • Add button in the head and tail.
      overrideSlotDefault({node, index, path, tree}, original) {
  return <div>
    <button>before</button>
    {original()}
    <button>after</button>
  </div>
}
    • Custom display text.
      overrideSlotDefault({node, index, path, tree}, original) {
  return <div>
    {node.title}
  </div>
}

# blockHeader

  • Type: () => JSX
  • Detail: Insert template to head.

# blockFooter

  • Type: () => JSX
  • Detail: Insert template to end.

# Node Special Properties

Special attributes of nodes in the base Tree.

# $hidden

  • Type: Boolean
  • Detail: Hide node.

# $xxxClass

  • Type: String
  • Detail: Define the class of the HTML element. All: $branchClass, $nodeBackClass, $nodeClass, $childrenClass.

# $xxxStyle

  • Type: [Object, String]
  • Detail: Define the style of the HTML element. All: $branchStyle, $nodeBackStyle, $nodeStyle, $childrenStyle.

# Static Methods

# mixPlugins

  • Type: (plugins: Plugin[]) => VueComponent
  • Detail: Mix the base tree with the given plugin, returning new component.

# Fold Plugin

# props

# foldingTransitionName

  • Type: String
  • Detail: The transition name.

# foldingTransition

  • Type: Vue
  • Detail: The transition component.

# foldAllAfterMounted

  • Type: Boolean
  • Detail: Fold all nodes after mounted.

# Node Special Properties

Special properties of nodes in this plugin.

# $folded

  • Type: Boolean
  • Detail: Whether the node is folded.

# methods

# fold

  • Type: (node: Node, path: Path)
  • Detail: Fold node.

# unfold

  • Type: (node: Node, path: Path, [options: Object])
    • options:
      • foldOthers: false, Fold nodes in other branchs.
  • Detail: Unfold node.

# toggleFold

  • Type: (node: Node, path: Path, [options: Object])
    • options: Passed to fold or unfold.
  • Detail: Toggle status.

# foldAll

  • Type: () => undefined

# unfoldAll

  • Type: () => undefined

# events

# node-folded-changed

  • Type: (node: Node)
  • Detail: Triggered when node is folded or unfolded.

# nodeFoldedChanged

  • Type: (node: Node)
  • Detail: Alias of node-folded-changed. Will be deprecated.

# Check Plugin

# methods

# check

# uncheck

# toggleCheck

# Draggable Plugin

# props

# triggerClass

  • Type: String, default: 'tree-node'
  • Detail: class of the element which trigger drag.

# triggerBySelf

  • Type: Boolean, default: false
  • Detail: Prevent child elements from triggering drag.

# draggable

# droppable

# eachDraggable

  • Type: [undefined, Boolean, Function]
  • Detail: Whether a single node is draggable.

# eachDroppable

  • Type: [undefined, Boolean, Function]
  • Detail: Whether a single node is droppable.

# ondragstart

  • Type: (tree: Tree, store: Store) => Boolean
  • Detail: Hook, whether to prevent drag.

# ondragend

  • Type: (tree: Tree, store: Store) => Boolean
  • Detail: Hook, whether to prevent the drag result.

# unfoldWhenDragover

  • Type: Boolean, default: true
  • Detail: When dragging over a node, whether to open it if the node is folded.

# unfoldWhenDragoverDelay

  • Type: Number, default: 30, unit: millisecond
  • Detail: When dragging over a folded node, wait some milliseconds before open it.

# draggingNodePositionMode

  • Type: 'top_left_corner'|'mouse', default: 'top_left_corner'
  • Detail: How to locate the dragging node. top_left_corner: the top left corner of dragging node; mouse: mouse position

# edgeScroll

  • Type: Boolean
  • Detail: Enable edge scroll.

# edgeScrollTriggerMargin

  • Type: Number, default: 50
  • Detail: The margin to trigger edge scroll.

# edgeScrollSpeed

  • Type: Number, default: 0.35
  • Detail: The scroll speed.

# edgeScrollTriggerMode

  • Type: 'top_left_corner'|'mouse', default: 'top_left_corner'
  • Detail: How to trigger edge scroll. top_left_corner: triggered by the top left corner; mouse: triggered by the mouse position.

# edgeScrollSpecifiedContainerX

  • Detail: HTMLElement | (store) => HTMLElement
  • Detail: Specify the parent element that triggers horizontal edge scrolling

# edgeScrollSpecifiedContainerY

  • type: HTMLElement | (store) => HTMLElement
  • Detail: Specify the parent element that triggers vertical edge scrolling

# preventTextSelection

  • type: type: Boolean, default: true
  • Detail: Prevent the text from being selected while dragging. It will execute event.preventDefault() in some events.

# crossTree pro

  • Type: [Boolean, Function], default: false
    • Function: (tree: Tree, store: Store) => Boolean
  • Detail: Whether to allow cross trees. This must be enabled for both start tree and target tree.

# maxLevel pro

  • Type: Number
  • Detail: The maximum number of levels allowed by the tree. It determines whether node can be placed when drag.

# cloneWhenDrag pro

  • Type: Boolean, default: false
  • Detail: Clone node when drag.

# methods

# isNodeDraggable

  • Type: (node: Node, path: Path) => Boolean

# isNodeDroppable

  • Type: (node: Node, path: Path) => Boolean

# Node Special Properties

Special properties of nodes in this plugin.

# $draggable

  • Type: [undefined, Boolean, Function]
  • Detail: Whether a single node is draggable.

# $droppable

  • Type: [undefined, Boolean, Function]
  • Detail: Whether a single node is droppable.

# events

# drag

# before-drop

# drop

# input

# change

# after-placeholder-created

# afterPlaceholderCreated

  • Type: (store: Store)
  • Detail: Alias of after-placeholder-created. Will be deprecated.

# after-move

  • Type: (store: Store)
  • Detail: after each mousemove or touchmove event

# Utils

# cloneTreeData

  • Type: (treeData: TreeData, options: Object) => TreeData
    • options
      • afterNodeCreated: (newNode, {oldNode: node, index, parent, path})

# walkTreeData

  • Type: (treeData: TreeData, handler: Function, options)
    • handler: (node, index, parent, path)
      • return false: stop walk
      • return 'skip children'
      • return 'skip siblings'
    • options
      • {Boolean} reverse
  • Detail: Iterate TreeData.

# getPureTreeData

# foldAll

  • Type: (treeData: TreeData)
  • Detail: walk treeData and fold all. Make sure the data is reactive before do this.

# unfoldAll

  • Type: (treeData: TreeData)
  • Detail: walk treeData and unfold all. Make sure the data is reactive before do this.

# Others

# Data Types

# TreeData

  • Type: Array
  • Detail: Tree data.
  • Example: [{text: 'node 1'}, {text: 'node 2', children: [{text: 'node 2-1'}]}]

# Node

  • Type: Object
  • Detail: Node data, children is key of subtree, options key starts with $.
  • Example: {text: 'node 2', children: [{text: 'node 2-1'}, $draggable: false]}

# PureTreeData

  • Type: Array
  • Detail: Pure tree data, without key starts with $.

# PureNode

  • Type: Object
  • Detail: Pure node data, without key starts with $.

# Path

  • Type: Array
  • Detail: Node position in TreeData. Starting from the highest second level, the serial number of each level in the parent.
  • Example: [{text: 'node 1'}, {text: 'node 2', children: [{text: 'node 3'}]}], path of 'node 3' is [1, 0]

# Tree

  • Detail: Vue instance(vm) of Tree.

# Store

  • Type: Object
    • {HTMLElement} listenerElement: Elements bound to event listeners
    • {HTMLElement} directTriggerElement: The element triggered event directly.
    • {HTMLElement} triggerElement: The element allowed to trigger event. Maybe the parent of directTriggerElement.
    • {HTMLElement} movedElement: the moving el
    • {HTMLElement} movedOrClonedElement: the original moving el, used when clone
    • {Object: {x, y}} mouse: the mouse position, relative to viewport.
    • {Number} movedCount: the moved times
    • {Event} startEvent: mousedown or touchstart event
    • {Event} endEvent: mouseup or touchend event
    • {HTMLElement} startTreeEl
    • {vm} startTree
    • {Path} startPath
    • {HTMLElement} dragBranchEl
    • {Node} dragNode
    • {HTMLElement} targetTreeEl
    • {vm} targetTree
    • {Path} targetPath
    • {Boolean} targetPathNotEqualToStartPath
    • {HTMLElement} placeholder
    • {Boolean} pathChangePrevented: if path change be prevented by hooks.
    • {Boolean} pathChanged: Whether the path changes in the end.
  • Detail: Related data during this dragging process. Created when drag start, destroyed when drag end. Also available through tree.treesStore.store.

# IsDraggable

  • Type: [Boolean, undefined]
    • undefined: Inherit parent
  • Detail: Whether a single node is draggable.

# IsDroppable

  • Type: [Boolean, undefined]
    • undefined: Inherit parent
  • Detail: Whether a single node is droppable.

# JSX

# HTML Elements

# tree-children

  • Detail: List. The top has class tree-root.

# tree-branch

  • Detail: The child of tree-children. Branch element, including tree-node and tree-children.

# tree-node-back

  • Detail: The child of tree-branch. Node back element. The main role is to serve as the full-width background element of the node. You can set the full-width background color when hover through css. It has a padding-left that automatically calculates the indentation of the node.

# tree-node

  • Detail: The child of tree-node-back. Node element, including default slot.

← Buy Pro →