API

BaseTree#

props#

idKey#

{ type: String, default: "id" }

parentIdKey#

{ type: String, default: "parent_id" }

childrenKey#

{ type: String, default: "children" }

textKey#

{ type: String, default: "text" }

flatData#

{
  type: Array
}

treeData#

{
  type: Array
}

indent#

{ type: Number, default: 20 }

gap#

{
  type: Number
}

rtl#

{ type: Boolean, default: false }

virtualization#

{ type: Boolean, default: false }

virtualizationPrerender#

{ type: Number, default: 20 }

childrenLazyLoading#

{ type: Boolean, default: false }

childrenLoader#

(
  node: Node,
  vm: ComponentPublicInstance
) => Promise<Node[]>;

defaultFolded#

{ type: Boolean, default: false }

data#

nodes#

Node[]

nodesByID#

Record<string, Node>

trees#

{[treeID:string]: Node}

dragging#

boolean

treeID#

string

tree#

vm of tree

this

computed#

visibleNodes#

Node[]

events#

fold#

折叠节点时触发.

(node: Node)

unfold#

打开节点时触发.

(node: Node)

load-children#

针对子节点延迟加载. 加载子节点时触发.

(node: Node)

load-children-success#

针对子节点延迟加载. 加载子节点成功时触发.

(node: Node)

load-children-error#

针对子节点延迟加载. 加载子节点失败时触发. 通过node.$childrenLoadStaus.error获取错误信息.

(node: Node)

methods#

countChildren#

(node: Node | undefined): number

addNode#

(node: obj, parentId: number | string | null, index?: number): void;

moveNode#

(node: Node, parentId: number | string | null, index?: number): void;

removeNode#

(node: Node): void;

outputNestedData#

(parent: Node | null, ignoreKeys?: string[], _returnFlat?: boolean | undefined): obj[];

outputFlatData#

(parent: Node | null, ignoreKeys?: string[]): Record<string, unknown>[];

isNodeParentFolded#

(node: Node): boolean;

isNodeVisible#

(node: Node): boolean;

foldAll#

(): void;

unfoldAll#

(node?: Node | undefined): Promise<void> | undefined;

unfold#

(node: Node): void | Promise<void>;

toggleFold#

(node: Node): void | Promise<void>;

updateChecked#

(node: Node): void;

getAllCheckedNodes#

(): Node[];

Draggable#

拖拽树组件. 继承于 BaseTree.

props#

triggerClass#

{ type: String, default: "tree-node" }

triggerBySelf#

Boolean

draggable#

{ type: Boolean, default: true }

droppable#

{ type: Boolean, default: true }

eachDraggable#

{
  type: [Boolean, Function]
}

方法类型是 eachDraggableFunc

eachDroppable#

{
  type: [Boolean, Function]
}

方法类型是 eachDraggableFunc

rootDraggable#

{ type: Boolean, default: true }

rootDroppable#

{ type: Boolean, default: true }

ondragstart#

{
  type: Function as PropType<(store: Store3) => boolean>
}

ondragend 支持 promise, 但 ondragstart 不支持.

ondragend#

{
  type: Function as PropType<(store: Store3) => boolean>
}

ondragend 支持 promise, 但 ondragstart 不支持.

执行ondragend时, 数据尚未更新.

afterPlaceholderCreated#

(placeholder: HTMLElement, store: Store3) => void

placeholderMaxHeight#

{ type: Number, default: 100 }

unfoldWhenDragover#

{ type: Boolean, default: true }

unfoldWhenDragoverDelay#

{ type: Number, default: 80 }

isNodeUnfoldable#

{
type: Function as PropType<(store: Store3) => boolean>,
}

draggingNodePositionMode#

{
type: String as PropType<PositionMode>,
default: "top_left_corner",
}

preventTextSelection#

{ type: Boolean, default: true }

edgeScroll#

{
  type: Boolean
}

edgeScrollTriggerMargin#

{ type: Number, default: 50 }

edgeScrollSpeed#

{ type: Number, default: 0.35 }

edgeScrollTriggerMode#

{
type: String as PropType<PositionMode>,
default: "top_left_corner",
}

edgeScrollSpecifiedContainerX#

HTMLElement | ((store: Store3) => HTMLElement)

edgeScrollSpecifiedContainerY#

HTMLElement | ((store: Store3) => HTMLElement)

data#

draggingNode#

Node | null

store#

拖拽过程中的相关数据.

Store3 | null

events#

drag#

拖拽开始时触发.

(store: Store3)

before-first-move#

与drag相同并同时触发.

(store: Store3)

drop#

拖拽结束时触发. 触发到拖拽开始树.

(store: Store3)

drop-into#

拖拽结束时触发. 触发到拖拽目标树(如果拖拽开始的树和结束的不是同一颗树, 即跨树).

(store: Store3)

drop-change#

拖拽结束时触发. 同时触发到拖拽开始和目标树.

(store: Store3)

methods#

isParentDragging#

(node: Node): boolean;

Other#

Draggable#

Draggable 组件的 Vue 实例(vm).

eachDraggableFunc#

type eachDraggableFunc = (
  node: Node | undefined,
  store: Store3,
  options: Options2,
  vm: Draggable
) => boolean | undefined

PositionMode#

'top_left_corner' | 'mouse'

Store3#

拖拽过程中的相关数据.

interface {
  // Store
  movedCount: number;
  listenerElement: HTMLElement;
  directTriggerElement: HTMLElement;
  triggerElement: HTMLElement;
  startEvent: MouseOrTouchEvent;
  moveEvent: MouseOrTouchEvent;
  endEvent: MouseOrTouchEvent;
  mouse: EventPosition;
  initialMouse: EventPosition;
  move: EventPosition2;
  movedOrClonedElement: HTMLElement;
  movedElement: HTMLElement;
  initialPosition: EventPosition2;
  initialPositionRelativeToViewport: EventPosition2;
  updateMovedElementStyle: () => void;
  _isMovingElementCloned: boolean;
  // Store2
  startTreeEl: HTMLElement;
  targetTreeEl: HTMLElement;
  placeholder: HTMLElement;
  // Store3
  startTree: Draggable;
  targetTree: Draggable;
  draggingNode: Node;
  startPath: {
      tree: Draggable;
      parent?: Node;
      index: number;
  };
  targetPath: Store3["startPath"]; // same to startPath
  placeholderLevel: number;
  placeholderPrevNode?: Node;
  placeholderPrevNodeInTree?: Node;
  dragChanged?: boolean;
  isCloned?: boolean;
}

EventPosition#

{
  x: number, y: number,
  pageX: number,
  pageY: number,
  clientX: number,
  clientY: number,
  screenX: number,
  screenY: number
}

EventPosition2#

{
  x: number
  y: number
}

obj#

{
  string: unknown
}

BaseNode#

{
    $id: string | number;
    $pid?: string | number;
    $level: number;
    $hidden?: boolean;
    $folded?: boolean;
    $checked?: boolean | 0;
    $children: Node[];
    $childrenLoading?: boolean;
    $childrenLoadStaus?: {
      status: 'success'|'error',
      error: Error
    };
    $draggable?: boolean;
    $droppable?: boolean;
    $nodeStyle?: string | Record<string, string> | unknown;
    $nodeClass?: string | unknown;
    $outerStyle?: string | Record<string, string> | unknown;
    $outerClass?: string | unknown;
}

Node#

obj & BaseNode