vue-project-tree/src/utils/interface.ts

使用 Vue3 + TS 实现的树形结构展示组件，有拖拽、排序、自定义图标等功能

export interface VueProjectTreeProps {
    data: NodeData[];
    idKey?: string;
    labelKey?: string;
    childrenKey?: string;
    indent?: number | string;
    nodeHeight?: number | string;
    highlightCurrent?: boolean;
    expandIcon?: boolean;
    expandIconSize?: number | string;
    expandIconHold?: boolean;
    expandWithClick?: boolean;
    expandHoverTime?: 380;
    nodeIcon?: boolean;
    nodeIconSize?: number | string;
    filterMethod?: Function;
    draggable?: boolean;
    allowDrag?: Function;
    allowDrop?: Function;
    dropOffset?: number;
};

export interface VueProjectTreeNodeProps {
    parent: NodeData | null;
    data: NodeData;
    idKey: string;
    labelKey: string;
    childrenKey: string;
    currentData?: NodeData;
    highlightCurrent?: boolean;
    level: number;
    expandIcon: boolean;
    expandIconSize: number | string;
    expandIconHold: boolean;
    nodeIcon: boolean;
    nodeIconSize: number | string;
    draggable: boolean;
    allowDrag: Function;
    allowDrop: Function;
};

export interface DroppedExtraData {
    type: "dropped" | "before" | "in" | "after";
    isPreventDefault: boolean;
    preventDefault: Function;
    _default?: Function;
};

export interface NodeData {
    [key: string]: any;
    _isVisible?: boolean;
    _isCurrent?: boolean;
    _isSelected?: boolean;
    _isExpanded?: boolean;
    _isExpandedOld?: boolean;
    _isMoving?: boolean;
    _isDropBefore?: boolean;
    _isDropIn?: boolean;
    _isDropAfter?: boolean;
    _parent?: NodeData | null;
    _id?: string | number;
    _label?: string;
    _children?: NodeData[];
}