@netang/quasar 0.2.30 → 0.2.32

package/components/tree/index.vue

@@ -1,1728 +1,1728 @@
-<template>
-    <component
-        :is="isNVirtualScroll ? NVirtualScroll : QVirtualScroll"
-        :class="classes"
-        :items="currentChildren"
-        :virtual-scroll-item-size="virtualScrollItemSize"
-        v-bind="virtualScrollProps"
-        v-slot="{ item, index }"
-    >
-        <div
-            :class="item.classes"
-            :key="item.key"
-            @mousedown.self="onMouseDown($event, item)"
-            @mouseup="onDragEnd"
-            @dragstart.stop="onDragStart($event, item)"
-            @dragenter.stop="onDragEnter($event, item, false)"
-            @dragover.stop="onDragEnter($event, item, true)"
-            @dragleave.stop="onDragLeave($event, item)"
-            @dragend.stop="onDragEnd"
-            :draggable="draggable"
-        >
-            <div class="q-focus-helper" @click="onClick(item.node, item.m, $event)"></div>
-
-            <!-- 前置容器 -->
-            <div
-                class="n-tree__node__prepend"
-                :style="{ paddingLeft: (item.level * arrowSize) + 'px' }"
-                @click="onNode(item, $event)"
-            >
-                <!-- 旋转器 -->
-                <q-spinner
-                    class="q-tree__spinner q-ml-sm"
-                    :color="computedControlColor"
-                    v-if="item.m.lazy === 'loading'"
-                />
-
-                <!-- 箭头图标 -->
-                <q-icon
-                    class="q-tree__arrow q-ml-sm"
-                    :name="computedIcon"
-                    :class="`${item.m.expanded ? 'q-tree__arrow--rotate' : ''}`"
-                    :size="arrowSize + 'px'"
-                    v-bind="iconProps"
-                    v-else-if="item.isParent === true"
-                />
-
-                <!-- 空白占位符 -->
-                <div
-                    class="n-tree__arrow--noop q-ml-sm"
-                    :style="{
-                        width: arrowSize + 'px',
-                        height: arrowSize + 'px',
-                    }"
-                    v-else
-                ></div>
-
-            </div>
-
-            <!-- 复选框-->
-            <q-checkbox
-                class="q-tree__tickbox"
-                :model-value="item.m.indeterminate === true ? null : item.m.ticked"
-                :color="computedControlColor"
-                :dark="isDark"
-                :disable="item.m.tickable !== true"
-                dense
-                keep-color
-                @keydown="stopAndPrevent"
-                @update:model-value="v => { onTickedClick(item.m, v) }"
-                v-show="! multiple"
-                v-if="item.m.hasTicking === true && item.m.noTick !== true"
-            />
-
-            <!-- 节点内容 -->
-            <div
-                class="n-tree__node-content"
-                @click="onClick(item.node, item.m, $event)"
-            >
-                <!-- 默认头部插槽 -->
-                <slot
-                    name="default-header"
-                    :node="item.node"
-                    :expanded="item.m.expanded"
-                    :ticked="item.m.indeterminate === true ? null : item.m.ticked"
-                    :key="item.key"
-                    :dark="isDark"
-                    v-if="hasSlots.defaultHeader"
-                />
-                <!-- 否则为文字 -->
-                <span v-else>{{ item.label }}</span>
-            </div>
-
-            <!-- 节点插槽 -->
-            <slot
-                name="node"
-                :node="item.node"
-                :expanded="item.m.expanded"
-                :ticked="item.m.indeterminate === true ? null : item.m.ticked"
-                :key="item.key"
-                :dark="isDark"
-                v-if="hasSlots.node"
-            />
-
-        </div>
-    </component>
-</template>
-
-<script>
-import {
-    ref, computed, watch,
-    nextTick, getCurrentInstance, onBeforeUpdate, onMounted, onUnmounted
-} from 'vue'
-
-import { stopAndPrevent } from 'quasar/src/utils/event'
-
-import QVirtualScroll from 'quasar/src/components/virtual-scroll/QVirtualScroll'
-import NVirtualScroll from '../virtual-scroll'
-
-const tickStrategyOptions = [ 'none', 'strict', 'leaf', 'leaf-filtered' ]
-
-import $n_has from 'lodash/has'
-import $n_get from 'lodash/get'
-import $n_isFunction from 'lodash/isFunction'
-import $n_findIndex from 'lodash/findIndex'
-
-import $n_trimString from '@netang/utils/trimString'
-import $n_isValidArray from '@netang/utils/isValidArray'
-import $n_indexOf from '@netang/utils/indexOf'
-import $n_on from '@netang/utils/on'
-import $n_off from '@netang/utils/off'
-
-export default {
-
-    /**
-     * 标识
-     */
-    name: 'NTree',
-
-    /**
-     * 声明属性
-     */
-    props: {
-        dark: {
-            type: Boolean,
-            default: null
-        },
-        nodes: {
-            type: [ Array, Object ],
-            required: true
-        },
-        nodeKey: {
-            type: String,
-            required: true
-        },
-        labelKey: {
-            type: String,
-            default: 'label'
-        },
-        childrenKey: {
-            type: String,
-            default: 'children'
-        },
-
-        dense: Boolean,
-
-        color: String,
-        controlColor: String,
-        textColor: String,
-        selectedColor: String,
-
-        icon: String,
-        iconProps: Object,
-
-        tickStrategy: {
-            type: String,
-            default: 'none',
-            validator: v => tickStrategyOptions.includes(v)
-        },
-        ticked: Array, // v-model:ticked
-        expanded: Array, // v-model:expanded
-        selected: {}, // v-model:selected
-
-        noSelectionUnset: Boolean,
-
-        defaultExpandAll: Boolean,
-        accordion: Boolean,
-
-        filter: String,
-        filterMethod: Function,
-
-        duration: Number,
-        noConnectors: Boolean,
-        noTransition: Boolean,
-
-        noNodesLabel: String,
-        noResultsLabel: String,
-
-        // 【覆盖声明】-------------------------------------------------------
-
-        // 是否选择的是树节点数据(false:节点键值, true:节点数据)
-        selectedNode: Boolean,
-
-        // 是否开启拖拽
-        draggable: Boolean,
-        // 是否禁止上下推拽
-        noDragUpDown: Boolean,
-        // 判断节点能否被拖拽
-        allowDrag: Function,
-        // 拖拽时判定目标节点能否被放置, type 参数: top / inner / bottom / none ( 目标节点上方 / 目标节点内部 / 目标节点下方 / 无任何操作 )
-        allowDrop: Function,
-        // 是否多选
-        multiple: Boolean,
-        // 以像素为单位的默认行大小
-        virtualScrollItemSize: {
-            type: [ Number, String ],
-            default: 29,
-        },
-        // 虚拟滚动声明
-        virtualScrollProps: Object,
-        // 是否为自定义虚拟滚动
-        isNVirtualScroll: Boolean,
-
-        // 箭头大小
-        arrowSize: {
-            type: Number,
-            default: 16,
-        },
-    },
-
-    /**
-     * 声明事件
-     */
-    emits: [
-        'update:expanded',
-        'update:ticked',
-        'update:selected',
-        'lazyLoad',
-        'afterShow',
-        'afterHide',
-
-        'nodeDragStart',
-        'nodeDragEnter',
-        'nodeDragOver',
-        'nodeDragLeave',
-        'nodeDragEnd',
-    ],
-
-    /**
-     * 组合式
-     */
-    setup (props, { slots, emit }) {
-
-        const { proxy } = getCurrentInstance()
-        const { $q } = proxy
-
-        // ==========【数据】=========================================================================================
-
-        // 懒加载
-        const lazy = ref({})
-        // 已选节点数组
-        const innerTicked = ref(props.ticked || [])
-        // 已展开节点数组
-        const innerExpanded = ref(props.expanded || [])
-
-        let blurTargets = {}
-
-        // 是否拖拽中
-        const dragging = ref(false)
-        // 拖拽中节点
-        const draggingNode = ref(null)
-        // 放置节点
-        const dropNode = ref(null)
-
-        const dragClasses = ref({})
-        const ctrlDown = ref(false)
-        const shiftDown = ref(false)
-        const shiftDownNodeKey = ref(null)
-
-        // ==========【计算属性】=========================================================================================
-
-        /**
-         * 是否暗黑模式
-         */
-        const isDark = computed(() => (
-            props.dark === null
-                ? $q.dark.isActive
-                : props.dark
-        ))
-
-        /**
-         * 类名
-         */
-        const classes = computed(() =>
-            `n-tree n-tree--${ props.dense === true ? 'dense' : 'standard' }`
-            // + (props.noConnectors === true ? ' q-tree--no-connectors' : '')
-            + (isDark.value === true ? ' n-tree--dark' : '')
-            + (props.color !== void 0 ? ` text-${ props.color }` : '')
-        )
-
-        /**
-         * 是否有已选数据
-         */
-        const hasSelection = computed(() => props.selected !== void 0)
-
-        /**
-         * 图标
-         */
-        const computedIcon = computed(() => props.icon || $q.iconSet.tree.icon)
-
-        /**
-         * 控件颜色(复选框 / 旋转器)
-         */
-        const computedControlColor = computed(() => props.controlColor || props.color)
-
-        /**
-         * 当前已选数据键值
-         */
-        const currentSelectedKey = computed(function () {
-            return props.selectedNode ? props.selected[props.nodeKey] : props.selected
-        })
-
-        /**
-         * 文本颜色类名
-         */
-        // const textColorClass = computed(() => (
-        //     props.textColor !== void 0
-        //         ? ` text-${ props.textColor }`
-        //         : ''
-        // ))
-
-        /**
-         * 已选颜色类名
-         */
-        // const selectedColorClass = computed(() => {
-        //     const color = props.selectedColor || props.color
-        //     return color ? ` text-${ color }` : ''
-        // })
-
-        /**
-         * 过滤节点方法
-         */
-        const computedFilterMethod = computed(() => (
-            props.filterMethod !== void 0
-                ? props.filterMethod
-                : function (node, filter) {
-                    const label = $n_trimString(node[ props.labelKey ])
-                    return label && label.toLowerCase().indexOf(filter.toLowerCase()) > -1
-                }
-        ))
-
-        /**
-         * meta
-         */
-        const meta = computed(() => {
-            const meta = {}
-
-            const travel = (node, parent) => {
-                const tickStrategy = node.tickStrategy || (parent ? parent.tickStrategy : props.tickStrategy)
-                const
-                    key = node[ props.nodeKey ],
-                    isParent = node[ props.childrenKey ] && node[ props.childrenKey ].length > 0,
-                    selectable = node.disabled !== true && hasSelection.value === true && node.selectable !== false,
-                    expandable = node.disabled !== true && node.expandable !== false,
-                    hasTicking = tickStrategy !== 'none',
-                    strictTicking = tickStrategy === 'strict',
-                    leafFilteredTicking = tickStrategy === 'leaf-filtered',
-                    leafTicking = tickStrategy === 'leaf' || tickStrategy === 'leaf-filtered'
-
-                let tickable = node.disabled !== true && node.tickable !== false
-                if (leafTicking === true && tickable === true && parent && parent.tickable !== true) {
-                    tickable = false
-                }
-
-                let localLazy = node.lazy
-                if (
-                    localLazy === true
-                    && lazy.value[ key ] !== void 0
-                    && Array.isArray(node[ props.childrenKey ]) === true
-                ) {
-                    localLazy = lazy.value[ key ]
-                }
-
-                const m = {
-                    key,
-                    parent,
-                    isParent,
-                    lazy: localLazy,
-                    disabled: node.disabled,
-                    // link: node.disabled !== true && (selectable === true || (expandable === true && (isParent === true || localLazy === true))),
-                    children: [],
-                    matchesFilter: props.filter ? computedFilterMethod.value(node, props.filter) : true,
-
-                    selected: key === currentSelectedKey.value && selectable === true,
-                    selectable,
-                    expanded: isParent === true ? innerExpanded.value.includes(key) : false,
-                    expandable,
-                    noTick: node.noTick === true || (strictTicking !== true && localLazy && localLazy !== 'loaded'),
-                    tickable,
-                    tickStrategy,
-                    hasTicking,
-                    strictTicking,
-                    leafFilteredTicking,
-                    leafTicking,
-                    ticked: strictTicking === true
-                        ? innerTicked.value.includes(key)
-                        : (isParent === true ? false : innerTicked.value.includes(key)),
-
-                    childrens: [],
-                }
-
-                meta[ key ] = m
-
-                if (isParent === true) {
-                    m.childrens = node[ props.childrenKey ]
-                    m.children = node[ props.childrenKey ].map(n => travel(n, m))
-
-                    if (props.filter) {
-                        if (m.matchesFilter !== true) {
-                            m.matchesFilter = m.children.some(n => n.matchesFilter)
-                        }
-                        else if (
-                            m.noTick !== true
-                            && m.disabled !== true
-                            && m.tickable === true
-                            && leafFilteredTicking === true
-                            && m.children.every(n => n.matchesFilter !== true || n.noTick === true || n.tickable !== true) === true
-                        ) {
-                            m.tickable = false
-                        }
-                    }
-
-                    if (m.matchesFilter === true) {
-                        if (m.noTick !== true && strictTicking !== true && m.children.every(n => n.noTick) === true) {
-                            m.noTick = true
-                        }
-
-                        if (leafTicking) {
-                            m.ticked = false
-                            m.indeterminate = m.children.some(node => node.indeterminate === true)
-                            m.tickable = m.tickable === true && m.children.some(node => node.tickable)
-
-                            if (m.indeterminate !== true) {
-                                const sel = m.children
-                                    .reduce((acc, meta) => (meta.ticked === true ? acc + 1 : acc), 0)
-
-                                if (sel === m.children.length) {
-                                    m.ticked = true
-                                }
-                                else if (sel > 0) {
-                                    m.indeterminate = true
-                                }
-                            }
-
-                            if (m.indeterminate === true) {
-                                m.indeterminateNextState = m.children
-                                    .every(meta => meta.tickable !== true || meta.ticked !== true)
-                            }
-                        }
-                    }
-                }
-
-                return m
-            }
-
-            props.nodes.forEach(node => travel(node, null))
-            return meta
-        })
-
-        // ==========【监听数据】=========================================================================================
-
-        /**
-         * 监听已选节点数据
-         */
-        watch(() => props.ticked, val => {
-            innerTicked.value = val
-        })
-
-        /**
-         * 监听已展开节点数据
-         */
-        watch(() => props.expanded, val => {
-            innerExpanded.value = val
-        })
-
-        /**
-         * 通过指定 key 获取树节点
-         */
-        function getNodeByKey (key) {
-            const reduce = [].reduce
-
-            const find = (result, node) => {
-                if (result || !node) {
-                    return result
-                }
-                if (Array.isArray(node) === true) {
-                    return reduce.call(Object(node), find, result)
-                }
-                if (node[ props.nodeKey ] === key) {
-                    return node
-                }
-                if (node[ props.childrenKey ]) {
-                    return find(null, node[ props.childrenKey ])
-                }
-            }
-
-            return find(null, props.nodes)
-        }
-
-        /**
-         * 获取已选树节点数组
-         */
-        function getTickedNodes () {
-            return innerTicked.value.map(key => getNodeByKey(key))
-        }
-
-        /**
-         * 获取已展开树节点数组
-         */
-        function getExpandedNodes () {
-            return innerExpanded.value.map(key => getNodeByKey(key))
-        }
-
-        /**
-         * 确定节点是否展开
-         */
-        function isExpanded (key) {
-            return key && meta.value[ key ]
-                ? meta.value[ key ].expanded
-                : false
-        }
-
-        /**
-         * 用于折叠树的所有分支
-         */
-        function collapseAll () {
-            if (props.expanded !== void 0) {
-                emit('update:expanded', [])
-            }
-            else {
-                innerExpanded.value = []
-            }
-        }
-
-        /**
-         * 用于展开树的所有分支
-         */
-        function expandAll () {
-            const
-                expanded = innerExpanded.value,
-                travel = node => {
-                    if (node[ props.childrenKey ] && node[ props.childrenKey ].length > 0) {
-                        if (node.expandable !== false && node.disabled !== true) {
-                            expanded.push(node[ props.nodeKey ])
-                            node[ props.childrenKey ].forEach(travel)
-                        }
-                    }
-                }
-
-            props.nodes.forEach(travel)
-
-            if (props.expanded !== void 0) {
-                emit('update:expanded', expanded)
-            }
-            else {
-                innerExpanded.value = expanded
-            }
-        }
-
-        /**
-         * 在给定键的节点处展开树
-         */
-        function setExpanded (key, state, node = getNodeByKey(key), m = meta.value[ key ]) {
-            if (m.lazy && m.lazy !== 'loaded') {
-                if (m.lazy === 'loading') {
-                    return
-                }
-
-                lazy.value[ key ] = 'loading'
-                if (Array.isArray(node[ props.childrenKey ]) !== true) {
-                    node[ props.childrenKey ] = []
-                }
-                emit('lazyLoad', {
-                    node,
-                    key,
-                    done: children => {
-                        lazy.value[ key ] = 'loaded'
-                        node[ props.childrenKey ] = Array.isArray(children) === true ? children : []
-                        nextTick(() => {
-                            const localMeta = meta.value[ key ]
-                            if (localMeta && localMeta.isParent === true) {
-                                localSetExpanded(key, true)
-                            }
-                        })
-                    },
-                    fail: () => {
-                        delete lazy.value[ key ]
-                        if (node[ props.childrenKey ].length === 0) {
-                            delete node[ props.childrenKey ]
-                        }
-                    }
-                })
-            }
-            else if (m.isParent === true && m.expandable === true) {
-                localSetExpanded(key, state)
-            }
-        }
-
-        function localSetExpanded (key, state) {
-            let target = innerExpanded.value
-            const shouldEmit = props.expanded !== void 0
-
-            if (shouldEmit === true) {
-                target = target.slice()
-            }
-
-            if (state) {
-                if (props.accordion) {
-                    if (meta.value[ key ]) {
-                        const collapse = []
-                        if (meta.value[ key ].parent) {
-                            meta.value[ key ].parent.children.forEach(m => {
-                                if (m.key !== key && m.expandable === true) {
-                                    collapse.push(m.key)
-                                }
-                            })
-                        }
-                        else {
-                            props.nodes.forEach(node => {
-                                const k = node[ props.nodeKey ]
-                                if (k !== key) {
-                                    collapse.push(k)
-                                }
-                            })
-                        }
-                        if (collapse.length > 0) {
-                            target = target.filter(k => collapse.includes(k) === false)
-                        }
-                    }
-                }
-
-                target = target.concat([ key ])
-                    .filter((key, index, self) => self.indexOf(key) === index)
-            }
-            else {
-                target = target.filter(k => k !== key)
-            }
-
-            if (shouldEmit === true) {
-                emit('update:expanded', target)
-            }
-            else {
-                innerExpanded.value = target
-            }
-        }
-
-        /**
-         * 用于检查是否选中节点的复选框
-         */
-        function isTicked (key) {
-            return key && meta.value[ key ]
-                ? meta.value[ key ].ticked
-                : false
-        }
-
-        /**
-         * 添加节点复选框
-         */
-        function setTicked (keys, state) {
-            let target = innerTicked.value
-            const shouldEmit = props.ticked !== void 0
-
-            if (shouldEmit === true) {
-                target = target.slice()
-            }
-
-            if (state) {
-                target = target.concat(keys)
-                    .filter((key, index, self) => self.indexOf(key) === index)
-            }
-            else {
-                target = target.filter(k => keys.includes(k) === false)
-            }
-
-            if (shouldEmit === true) {
-                emit('update:ticked', target)
-            }
-        }
-
-        // function getSlotScope (node, meta, key) {
-        //     const scope = { tree: proxy, node, key, color: props.color, dark: isDark.value }
-        //
-        //     injectProp(
-        //         scope,
-        //         'expanded',
-        //         () => { return meta.expanded },
-        //         val => { val !== meta.expanded && setExpanded(key, val) }
-        //     )
-        //
-        //     injectProp(
-        //         scope,
-        //         'ticked',
-        //         () => { return meta.ticked },
-        //         val => { val !== meta.ticked && setTicked([ key ], val) }
-        //     )
-        //
-        //     return scope
-        // }
-
-        // function getChildren (nodes) {
-        //     return (
-        //         props.filter
-        //             ? nodes.filter(n => meta.value[ n[ props.nodeKey ] ].matchesFilter)
-        //             : nodes
-        //     ).map(child => getNode(child))
-        // }
-
-        // function getNodeMedia (node) {
-        //     if (node.icon !== void 0) {
-        //         return h(QIcon, {
-        //             class: 'q-tree__icon q-mr-sm',
-        //             name: node.icon,
-        //             color: node.iconColor
-        //         })
-        //     }
-        //     const src = node.img || node.avatar
-        //     if (src) {
-        //         return h('img', {
-        //             class: `q-tree__${ node.img ? 'img' : 'avatar' } q-mr-sm`,
-        //             src
-        //         })
-        //     }
-        // }
-
-        function onShow () {
-            emit('afterShow')
-        }
-
-        function onHide () {
-            emit('afterHide')
-        }
-
-        // function getNode (node) {
-        //     const
-        //         key = node[ props.nodeKey ],
-        //         m = meta.value[ key ],
-        //         header = node.header
-        //             ? slots[ `header-${ node.header }` ] || slots[ 'default-header' ]
-        //             : slots[ 'default-header' ]
-        //
-        //     const children = m.isParent === true
-        //         ? getChildren(node[ props.childrenKey ])
-        //         : []
-        //
-        //     const isParent = children.length > 0 || (m.lazy && m.lazy !== 'loaded')
-        //
-        //     let body = node.body
-        //         ? slots[ `body-${ node.body }` ] || slots[ 'default-body' ]
-        //         : slots[ 'default-body' ]
-        //     const slotScope = header !== void 0 || body !== void 0
-        //         ? getSlotScope(node, m, key)
-        //         : null
-        //
-        //     if (body !== void 0) {
-        //         body = h('div', { class: 'q-tree__node-body relative-position' }, [
-        //             h('div', { class: textColorClass.value }, [
-        //                 body(slotScope)
-        //             ])
-        //         ])
-        //     }
-        //
-        //     return h('div', {
-        //         key,
-        //         class: 'q-tree__node relative-position'
-        //             + ` q-tree__node--${ isParent === true ? 'parent' : 'child' }`
-        //     }, [
-        //         h('div', {
-        //             class: 'q-tree__node-header relative-position row no-wrap items-center'
-        //                 // + (m.link === true ? ' q-tree__node--link q-hoverable q-focusable' : '')
-        //                 + (m.selected === true ? ' n-tree__node--selected' : '')
-        //                 + (m.disabled === true ? ' q-tree__node--disabled' : ''),
-        //             tabindex: m.link === true ? 0 : -1,
-        //             onClick: (e) => {
-        //                 onClick(node, m, e)
-        //             },
-        //             onKeypress (e) {
-        //                 if (shouldIgnoreKey(e) !== true) {
-        //                     if (e.keyCode === 13) { onClick(node, m, e, true) }
-        //                     else if (e.keyCode === 32) { onExpandClick(node, m, e, true) }
-        //                 }
-        //             }
-        //         }, [
-        //             h('div', {
-        //                 class: 'q-focus-helper',
-        //                 tabindex: -1,
-        //                 ref: el => { blurTargets[ m.key ] = el }
-        //             }),
-        //
-        //             m.lazy === 'loading'
-        //                 ? h(QSpinner, {
-        //                     class: 'q-tree__spinner',
-        //                     color: computedControlColor.value
-        //                 })
-        //                 : (
-        //                     isParent === true
-        //                         ? h(QIcon, {
-        //                             class: 'q-tree__arrow'
-        //                                 + (m.expanded === true ? ' q-tree__arrow--rotate' : ''),
-        //                             name: computedIcon.value,
-        //                             onClick (e) { onExpandClick(node, m, e) }
-        //                         })
-        //                         : null
-        //                 ),
-        //
-        //             m.hasTicking === true && m.noTick !== true
-        //                 ? h(QCheckbox, {
-        //                     class: 'q-tree__tickbox',
-        //                     modelValue: m.indeterminate === true ? null : m.ticked,
-        //                     color: computedControlColor.value,
-        //                     dark: isDark.value,
-        //                     dense: true,
-        //                     keepColor: true,
-        //                     disable: m.tickable !== true,
-        //                     onKeydown: stopAndPrevent,
-        //                     'onUpdate:modelValue': v => {
-        //                         onTickedClick(m, v)
-        //                     }
-        //                 })
-        //                 : null,
-        //
-        //             h('div', {
-        //                 class: 'q-tree__node-header-content col row no-wrap items-center'
-        //                     + (m.selected === true ? selectedColorClass.value : textColorClass.value)
-        //             }, [
-        //                 header
-        //                     ? header(slotScope)
-        //                     : [
-        //                         getNodeMedia(node),
-        //                         h('div', node[ props.labelKey ])
-        //                     ]
-        //             ])
-        //         ]),
-        //
-        //         isParent === true
-        //             ? (
-        //                 props.noTransition === true
-        //                     ? h('div', {
-        //                         class: 'q-tree__node-collapsible' + textColorClass.value,
-        //                         key: `${ key }__q`
-        //                     }, [
-        //                         body,
-        //                         h('div', {
-        //                             class: 'q-tree__children'
-        //                                 + (m.disabled === true ? ' q-tree__node--disabled' : '')
-        //                         }, m.expanded ? children : null)
-        //                     ])
-        //
-        //                     : h(QSlideTransition, {
-        //                         duration: props.duration,
-        //                         onShow,
-        //                         onHide
-        //                     }, () => withDirectives(
-        //                         h('div', {
-        //                             class: 'q-tree__node-collapsible' + textColorClass.value,
-        //                             key: `${ key }__q`
-        //                         }, [
-        //                             body,
-        //                             h('div', {
-        //                                 class: 'q-tree__children'
-        //                                     + (m.disabled === true ? ' q-tree__node--disabled' : '')
-        //                             }, children)
-        //                         ]),
-        //                         [ [ vShow, m.expanded ] ]
-        //                     ))
-        //             )
-        //             : body
-        //     ])
-        // }
-
-        /**
-         * 失去焦点
-         */
-        function blur (key) {
-            const blurTarget = blurTargets[ key ]
-            blurTarget && blurTarget.focus()
-        }
-
-        /**
-         * 点击节点
-         */
-        function onClick (node, meta, e, keyboard) {
-
-            keyboard !== true && meta.selectable !== false && blur(meta.key)
-
-            // 如果有 v-model:selected
-            if (hasSelection.value && meta.selectable) {
-
-                if (props.noSelectionUnset === false) {
-                    emit('update:selected', meta.key !== currentSelectedKey.value ? (
-                        props.selectedNode ? node : meta.key
-                    ) : null)
-
-                } else if (meta.key !== currentSelectedKey.value) {
-                    emit('update:selected', meta.key === void 0 ? null : (
-                        props.selectedNode ? node : meta.key
-                    ))
-                }
-
-            } else {
-
-                // 如果是父节点
-                if (meta.isParent && ! props.multiple) {
-                    // 则展开点击
-                    onExpandClick(node, meta, e, keyboard)
-
-                // 如果有复选框
-                } else if (meta.hasTicking === true && meta.noTick !== true) {
-
-                    // 如果有复选框
-                    if (props.multiple) {
-
-                        // 如果按下 shfit
-                        if (shiftDown.value) {
-
-                            // 如果没有选中节点
-                            if (! innerTicked.value.length) {
-                                updateTicked([meta.key])
-                                return
-                            }
-
-                            const {
-                                length,
-                            } = innerTicked.value
-
-                            // 如果只选中一个节点 && 该节点为当前点击的节点
-                            if (length === 1 && innerTicked.value[0] === meta.key) {
-                                return
-                            }
-
-                            // 如果没有 shift 按下节点
-                            if (shiftDownNodeKey.value === null) {
-                                // 则设置最后一个选中节点为 shift 按下节点
-                                shiftDownNodeKey.value = innerTicked.value[length - 1]
-                            }
-
-                            // 获取最后一个选中节点
-                            const lastTickedKey = shiftDownNodeKey.value
-
-                            let lastIndex
-                            let selectedIndex
-
-                            for (let i = currentChildren.value.length - 1; i >= 0 ; i--) {
-                                const item = currentChildren.value[i]
-                                if (item.key === lastTickedKey) {
-                                    lastIndex = i
-                                } else if (item.key === meta.key) {
-                                    selectedIndex = i
-                                }
-                            }
-
-                            let startIndex
-                            let endIndex
-
-                            // 如果选择数据在最后一条数据前
-                            if (selectedIndex < lastIndex) {
-                                startIndex = selectedIndex
-                                endIndex = lastIndex
-
-                            // 如果选择数据在最后一条数据后
-                            } else if (selectedIndex > lastIndex) {
-                                startIndex = lastIndex
-                                endIndex = selectedIndex
-                            }
-
-                            const newTicked = []
-                            for (let i = startIndex; i <= endIndex; i++) {
-                                const item = currentChildren.value[i]
-                                if (item.m.tickable === true) {
-                                    newTicked.push(item.key)
-                                }
-                            }
-                            updateTicked(newTicked)
-
-                        // 如果按下 ctrl
-                        } else if (ctrlDown.value) {
-                            setTicked([meta.key], true)
-
-                        // 否则只是点击
-                        } else {
-                            updateTicked([meta.key])
-                        }
-                        return
-                    }
-
-                    // 否则复选框点击
-                    const isTicked = meta.indeterminate === true ? null : meta.ticked
-                    onTickedClick(meta, ! isTicked)
-                }
-            }
-
-            if (typeof node.handler === 'function') {
-                node.handler(node)
-            }
-        }
-
-        /**
-         * 展开点击
-         */
-        function onExpandClick (node, meta, e, keyboard) {
-            if (e !== void 0) {
-                stopAndPrevent(e)
-            }
-            keyboard !== true && meta.selectable !== false && blur(meta.key)
-            setExpanded(meta.key, !meta.expanded, node, meta)
-        }
-
-        /**
-         * 复选框点击
-         */
-        function onTickedClick (meta, state) {
-            if (meta.indeterminate === true) {
-                state = meta.indeterminateNextState
-            }
-            if (meta.strictTicking) {
-                setTicked([ meta.key ], state)
-            }
-            else if (meta.leafTicking) {
-                const keys = []
-                const travel = meta => {
-                    if (meta.isParent) {
-                        if (state !== true && meta.noTick !== true && meta.tickable === true) {
-                            keys.push(meta.key)
-                        }
-                        if (meta.leafTicking === true) {
-                            meta.children.forEach(travel)
-                        }
-                    }
-                    else if (
-                        meta.noTick !== true
-                        && meta.tickable === true
-                        && (meta.leafFilteredTicking !== true || meta.matchesFilter === true)
-                    ) {
-                        keys.push(meta.key)
-                    }
-                }
-                travel(meta)
-                setTicked(keys, state)
-            }
-        }
-
-        // 默认展开全部
-        props.defaultExpandAll === true && expandAll()
-
-        // expose public methods
-        // Object.assign(proxy, {
-        //     getNodeByKey,
-        //     getTickedNodes,
-        //     getExpandedNodes,
-        //     isExpanded,
-        //     collapseAll,
-        //     expandAll,
-        //     setExpanded,
-        //     isTicked,
-        //     setTicked
-        // })
-
-        // return () => {
-        //     const children = getChildren(props.nodes)
-        //
-        //     return h(
-        //         'div', {
-        //             class: classes.value
-        //         },
-        //         children.length === 0
-        //             ? (
-        //                 props.filter
-        //                     ? props.noResultsLabel || $q.lang.tree.noResults
-        //                     : props.noNodesLabel || $q.lang.tree.noNodes
-        //             )
-        //             : children
-        //     )
-        // }
-
-        // ==========【覆盖部分】=========================================================================================
-
-        /**
-         * 是否有默认插槽
-         */
-        const hasSlots = computed(function () {
-            return {
-                defaultHeader: $n_has(slots, 'default-header'),
-                node: $n_has(slots, 'node'),
-            }
-        })
-
-        /**
-         * 点击节点
-         */
-        function onNode(item, $event) {
-            if (
-                item.m.lazy !== 'loading'
-                && item.isParent === true
-            ) {
-                onExpandClick(item.node, item.m, $event)
-            } else {
-                onClick(item.node, item.m, $event)
-            }
-        }
-
-        /**
-         * 获取节点
-         */
-        function getNode(nodes, level, parents) {
-
-            const lists = []
-
-            // 如果有过滤方法
-            if (props.filter) {
-                nodes = nodes.filter(n => meta.value[ n[ props.nodeKey ] ].matchesFilter)
-            }
-
-            for (const node of nodes) {
-
-                const key = node[ props.nodeKey ]
-                const m = meta.value[ key ]
-
-                // 孩子节点
-                const children = m.isParent === true
-                    ? node[ props.childrenKey ]
-                    : []
-
-                // 是否为父节点
-                const isParent = children.length > 0 || (m.lazy && m.lazy !== 'loaded')
-
-                // 拖拽类名
-                const dragCss = $n_get(dragClasses.value, key)
-
-                // 当前节点类名
-                const classes = 'n-tree__node relative-position row no-wrap q-tree__node--link q-hoverable'
-                        // + (m.link === true ? ' q-tree__node--link q-hoverable q-focusable' : '')
-                        + (! dragging.value && (m.selected === true || props.multiple && m.ticked === true) ? ' n-tree__node--selected' : '')
-                        + (m.disabled === true ? ' q-tree__node--disabled' : '')
-                        + (dragCss ? ' ' + dragCss : '')
-
-                lists.push({
-                    classes,
-                    key,
-                    label: node[ props.labelKey ],
-                    m,
-                    isParent,
-                    level,
-                    parents,
-                    node,
-                })
-
-                // 如果当前节点在展开节点中
-                if (
-                    isParent
-                    && $n_indexOf(innerExpanded.value, key) > -1
-                ) {
-                    const childNodes = getNode(node[ props.childrenKey ], level + 1, [...parents, key])
-                    if (childNodes.length) {
-                        lists.push(...childNodes)
-                    }
-                }
-            }
-
-            return lists
-        }
-
-        /**
-         * 当前节点
-         */
-        const currentChildren = computed(function () {
-            if ($n_isValidArray(props.nodes)) {
-                return getNode(props.nodes, 0, [])
-            }
-            return []
-        })
-
-        // -------------------------------------------------------------------------------------------------
-
-        /**
-         * 更新节点复选框
-         */
-        function updateTicked (keys) {
-            if (props.ticked !== void 0) {
-                emit('update:ticked', keys)
-            } else {
-                innerTicked.value = keys
-            }
-        }
-
-        /**
-         * 按键按下
-         */
-        function onKeydown({ keyCode, shiftKey }) {
-
-            // 如果是 shift
-            if (keyCode === 16 || shiftKey) {
-                ctrlDown.value = false
-                shiftDown.value = true
-
-            // 如果是 ctrl
-            } else if (keyCode === 17) {
-                ctrlDown.value = true
-                shiftDown.value = false
-                shiftDownNodeKey.value = null
-
-            // 否则其他
-            } else {
-                onKeyup()
-            }
-        }
-
-        /**
-         * 按键弹起
-         */
-        function onKeyup() {
-            ctrlDown.value = false
-            shiftDown.value = false
-            shiftDownNodeKey.value = null
-        }
-
-        /**
-         * 鼠标点击
-         */
-        function onMouseDown() {
-            // 如果开启拖拽
-            if (props.draggable) {
-                // 设置拖拽中
-                dragging.value = true
-            }
-        }
-
-        /**
-         * 拖拽开始
-         */
-        function onDragStart(e, item) {
-
-            // 如果开启拖拽
-            if (props.draggable) {
-
-                // 判断节点能否被拖拽
-                if (
-                    $n_isFunction(props.allowDrag)
-                    && ! props.allowDrag(item.node)
-                ) {
-                    e.preventDefault()
-                    return false
-                }
-
-                e.dataTransfer.effectAllowed = 'move'
-
-                // wrap in try catch to address IE's error when first param is 'text/plain'
-                try {
-                    // setData is required for draggable to work in FireFox
-                    // the content has to be '' so dragging a node out of the tree won't open a new tab in FireFox
-                    e.dataTransfer.setData('text/plain', '')
-                } catch {}
-
-                // 设置拖拽中
-                dragging.value = true
-
-                // 设置拖拽中节点
-                draggingNode.value = item
-
-                // 设置节点类名
-                dragClasses.value[item.key] = 'dragging--before'
-
-                emit('nodeDragStart', item.node, e)
-            }
-        }
-
-        /**
-         * 拖拽进入
-         */
-        function onDragEnter(e, item, isOver) {
-
-            // 如果开启拖拽
-            if (props.draggable) {
-
-                dropNode.value = null
-
-                // 如果拖拽中
-                if (dragging.value) {
-
-                    const {
-                        key: fromKey,
-                    } = draggingNode.value
-
-                    // 设置节点类名
-                    if (! isOver) {
-                        dragClasses.value[draggingNode.value.key] = 'dragging'
-                    }
-
-                    let type
-
-                    if (
-                        // 如果被拖动节点 === 拖动只节点
-                        fromKey === item.key
-                        // 如果拖动的节点 在 被拖动节点的父级节点中
-                        || $n_indexOf(item.parents, fromKey) > -1
-                    ) {
-                        type = 'none'
-
-                    } else {
-
-                        // 如果禁止上下拖拽
-                        if (props.noDragUpDown) {
-                            type = 'inner'
-
-                        } else {
-
-                            const {
-                                top,
-                                height,
-                            } = e.target.getBoundingClientRect()
-
-                            const dY = e.clientY - top
-
-                            // 目标节点上方
-                            if (dY <= height * 0.3) {
-
-                                type = 'top'
-
-                            // 目标节点内部
-                            } else if (dY <= height * (0.7)) {
-
-                                type = 'inner'
-
-                            // 目标节点下方
-                            } else {
-                                type = 'bottom'
-                            }
-                        }
-
-                        // 拖拽时判定目标节点能否被放置, type 参数有三种情况: top / inner / bottom ( 目标节点上方 / 目标节点内部 / 目标节点下方 )
-                        if ($n_isFunction(props.allowDrop)) {
-                            const res = props.allowDrop(draggingNode.value.node, item.node, type)
-                            if (res !== true) {
-                                type = 'none'
-                            }
-                        }
-
-                        if (type !== 'none') {
-                            dragClasses.value[item.key] = `drag-over--${type}`
-                        }
-                    }
-
-                    // 为需要移动的元素设置 dragstart 事件
-                    // e.dataTransfer.effectAllowed = 'move'
-
-                    // 设置放置节点
-                    dropNode.value = {
-                        item,
-                        type,
-                    }
-
-                    emit(isOver ? 'nodeDragOver' : 'nodeDragEnter', draggingNode.value.node, item.node, e)
-                }
-            }
-        }
-
-        /**
-         * 拖拽结束
-         */
-        function onDragEnd(e) {
-
-            // 如果开启拖拽
-            if (props.draggable) {
-
-                if (draggingNode.value) {
-
-                    const draggingNodeKey = draggingNode.value.key
-
-                    dragClasses.value[draggingNodeKey] = ''
-
-                    if (dropNode.value) {
-
-                        const dropType = dropNode.value.type
-
-                        // 执行放置节点
-                        function doDrop() {
-
-                            // 放置类型 !== 'none'
-                            if (dropType !== 'none') {
-
-                                const dropNodeKey = dropNode.value.item.key
-
-                                // 删除拖拽中的节点
-                                function remove() {
-                                    const {
-                                        parent
-                                    } = draggingNode.value.m
-                                    const children = parent ? parent.childrens : props.nodes
-                                    const index = $n_findIndex(children, e => e[props.nodeKey] === draggingNodeKey)
-                                    if (index > -1) {
-                                        children.splice(index, 1)
-                                    }
-                                }
-
-                                // 如果放置目标节点内部
-                                if (dropType === 'inner') {
-                                    if (dropNode.value.item.m.childrens.length) {
-
-                                        // 判断该节点是否在内部
-                                        if ($n_findIndex(dropNode.value.item.m.childrens, e => e[props.nodeKey] === draggingNodeKey) > -1) {
-                                            // console.log('不用拖拽，在节点内部')
-                                            return false
-                                        }
-
-                                        remove()
-                                        dropNode.value.item.m.childrens.push(draggingNode.value.node)
-                                        return dropNode.value.item.m.childrens
-                                    }
-
-                                    remove()
-                                    dropNode.value.item.node[props.childrenKey] = [ draggingNode.value.node ]
-                                    return dropNode.value.item.node[props.childrenKey]
-
-                                // 否则放置目标节点上下
-                                } else {
-                                    const dropParent = dropNode.value.item.m.parent
-                                    const dropChildren = dropParent ? dropParent.childrens : props.nodes
-                                    let dropIndex = $n_findIndex(dropChildren, e => e[props.nodeKey] === dropNodeKey)
-                                    if (dropIndex > -1) {
-
-                                        // 如果移动至上方
-                                        if (dropType === 'top') {
-                                            if (dropIndex > 0) {
-                                                const dropTopItem = dropChildren[dropIndex - 1]
-                                                if (dropTopItem[props.nodeKey] === draggingNodeKey) {
-                                                    // console.log('不用拖拽，拖到上方的就是被拖拽节点自己')
-                                                    return false
-                                                }
-                                            }
-
-                                        // 否则移动到下方
-                                        } else if (dropIndex + 1 < dropChildren.length) {
-                                            const dropTopItem = dropChildren[dropIndex + 1]
-                                            if (dropTopItem[props.nodeKey] === draggingNodeKey) {
-                                                // console.log('不用拖拽，拖到下方的就是被拖拽节点自己')
-                                                return false
-                                            }
-                                        }
-
-                                        remove()
-                                        dropIndex = $n_findIndex(dropChildren, e => e[props.nodeKey] === dropNodeKey)
-                                        if (dropIndex > -1) {
-                                            dropChildren.splice(dropType === 'top' ? dropIndex : dropIndex + 1, 0, draggingNode.value.node)
-                                            return dropChildren
-                                        }
-                                    }
-                                }
-                            }
-                            return false
-                        }
-
-                        emit('nodeDragEnd', draggingNode.value.node, dropNode.value.item.node, dropType, doDrop, e)
-
-                    } else {
-                        emit('nodeDragEnd', draggingNode.value.node, null, 'none', () => props.nodes, e)
-                    }
-                }
-
-                draggingNode.value = null
-                dropNode.value = null
-                dragging.value = false
-            }
-        }
-
-        /**
-         * 拖拽离开
-         */
-        function onDragLeave(e, item) {
-
-            // 如果开启拖拽
-            if (props.draggable) {
-                if (draggingNode.value) {
-                    if (item.key === draggingNode.value.key) {
-                        return
-                    }
-                    dragClasses.value[item.key] = ''
-
-                    emit('nodeDragLeave', draggingNode.value.node, item.node, e)
-                }
-            }
-        }
-
-        // ==========【生命周期】=========================================================================================
-
-        /**
-         * 更新 DOM 之前调用
-         */
-        onBeforeUpdate(function () {
-            blurTargets = {}
-        })
-
-        /**
-         * 实例被挂载后调用
-         */
-        onMounted(function() {
-            $n_on(document, 'keydown', onKeydown)
-            $n_on(document, 'keyup', onKeyup)
-        })
-
-        /**
-         * 实例被卸载后调用
-         */
-        onUnmounted(function () {
-            $n_off(document, 'keydown', onKeydown)
-            $n_off(document, 'keyup', onKeyup)
-        })
-
-        return {
-            classes,
-            computedIcon,
-            computedControlColor,
-            isDark,
-            onClick,
-            onExpandClick,
-            onTickedClick,
-            getNodeByKey,
-            getExpandedNodes,
-            getTickedNodes,
-            isExpanded,
-            setExpanded,
-            isTicked,
-            setTicked,
-            expandAll,
-            collapseAll,
-            stopAndPrevent,
-
-            hasSlots,
-            currentChildren,
-
-            onNode,
-            onMouseDown,
-            onDragStart,
-            onDragEnter,
-            onDragLeave,
-            onDragEnd,
-
-            NVirtualScroll,
-            QVirtualScroll,
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-@import "@/assets/sass/variables.scss";
-
-.n-tree {
-    color: $grey;
-
-    // 空箭头
-    &__arrow--noop {
-        //width: 16px;
-        //height: 16px;
-        margin-right: 4px;
-    }
-
-    // 树节点
-    &__node {
-        margin: 4px;
-        border-radius: 4px;
-        //transition: all .3s;
-        //background-color: green;
-
-        // 前置容器
-        &__prepend {
-            position: relative;
-            //height: 100% !important;
-            display: flex;
-            align-items: center;
-            //background-color: red;
-        }
-
-        // 已选
-        &--selected:not(.drag-over--inner) {
-            > .q-focus-helper {
-                background: currentColor;
-                opacity: 0.15 !important;
-            }
-        }
-
-        // 拖拽前
-        &.dragging--before {
-            > .q-focus-helper {
-                display: none;
-            }
-        }
-
-        // 拖拽中
-        &.dragging {
-            > .q-focus-helper {
-                background: transparent !important;
-                opacity: 1 !important;
-                border: 1px solid var(--q-primary);
-                &:before {
-                    background-color: var(--q-primary);
-                    opacity: 0.1 !important;
-                    box-sizing: border-box;
-                }
-                &:after {
-                    opacity: 0 !important;
-                }
-            }
-        }
-
-        // 拖拽至上方
-        &.drag-over--top {
-            .n-tree__node-content {
-                &:before {
-                    top: 0;
-                    margin-top: -3px;
-                }
-                &:after {
-                    border-top-color: var(--q-primary);
-                }
-            }
-        }
-
-        // 拖拽至内部
-        &.drag-over--inner {
-            color: rgba(255, 255, 255, 0.6);
-            > .q-focus-helper {
-                background-color: var(--q-primary) !important;
-                opacity: 1;
-            }
-            .n-tree__node-content {
-                color: #ffffff;
-            }
-        }
-
-        // 拖拽至底部
-        &.drag-over--bottom {
-            .n-tree__node-content {
-                &:before {
-                    bottom: 0;
-                    margin-bottom: -3px;
-                }
-                &:after {
-                    border-bottom-color: var(--q-primary);
-                }
-            }
-        }
-
-        &.drag-over--top,
-        &.drag-over--bottom {
-            .n-tree__node-content {
-                &:before {
-                    content: "";
-                    position: absolute;
-                    left: 0;
-                    margin-left: -8px;
-                    border-radius: 50%;
-                    width: 8px;
-                    height: 8px;
-                    border: 2px solid var(--q-primary);
-                    pointer-events: none;
-                }
-            }
-
-            > .q-focus-helper {
-                background-color: var(--q-primary);
-                opacity: 0.15;
-            }
-        }
-
-        // 拖拽内容
-        &-content {
-            position: relative;
-            display: flex;
-            flex: 1;
-            align-items: center;
-            padding: 4px 5px;
-            margin-left: -5px;
-            color: #000000;
-
-            &:after {
-                content: "";
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                left: 0;
-                right: 0;
-                border-top: 2px transparent solid;
-                border-bottom: 2px transparent solid;
-                pointer-events: none;
-            }
-        }
-    }
-
-    &--dark {
-        .n-tree__node-content {
-            color: #ffffff;
-        }
-
-        .n-tree__node {
-
-            // 已选
-            &--selected:not(.drag-over--inner) {
-                > .q-focus-helper {
-                    opacity: 0.3 !important;
-                }
-            }
-
-            // 拖拽中
-            &.dragging {
-                > .q-focus-helper {
-                    &:before {
-                        opacity: 0.3 !important;
-                    }
-                }
-            }
-
-            &.drag-over--top,
-            &.drag-over--bottom {
-                > .q-focus-helper {
-                    opacity: 0.3 !important;
-                }
-            }
-        }
-    }
-}
-</style>
+<template>
+    <component
+        :is="isNVirtualScroll ? NVirtualScroll : QVirtualScroll"
+        :class="classes"
+        :items="currentChildren"
+        :virtual-scroll-item-size="virtualScrollItemSize"
+        v-bind="virtualScrollProps"
+        v-slot="{ item, index }"
+    >
+        <div
+            :class="item.classes"
+            :key="item.key"
+            @mousedown.self="onMouseDown($event, item)"
+            @mouseup="onDragEnd"
+            @dragstart.stop="onDragStart($event, item)"
+            @dragenter.stop="onDragEnter($event, item, false)"
+            @dragover.stop="onDragEnter($event, item, true)"
+            @dragleave.stop="onDragLeave($event, item)"
+            @dragend.stop="onDragEnd"
+            :draggable="draggable"
+        >
+            <div class="q-focus-helper" @click="onClick(item.node, item.m, $event)"></div>
+
+            <!-- 前置容器 -->
+            <div
+                class="n-tree__node__prepend"
+                :style="{ paddingLeft: (item.level * arrowSize) + 'px' }"
+                @click="onNode(item, $event)"
+            >
+                <!-- 旋转器 -->
+                <q-spinner
+                    class="q-tree__spinner q-ml-sm"
+                    :color="computedControlColor"
+                    v-if="item.m.lazy === 'loading'"
+                />
+
+                <!-- 箭头图标 -->
+                <q-icon
+                    class="q-tree__arrow q-ml-sm"
+                    :name="computedIcon"
+                    :class="`${item.m.expanded ? 'q-tree__arrow--rotate' : ''}`"
+                    :size="arrowSize + 'px'"
+                    v-bind="iconProps"
+                    v-else-if="item.isParent === true"
+                />
+
+                <!-- 空白占位符 -->
+                <div
+                    class="n-tree__arrow--noop q-ml-sm"
+                    :style="{
+                        width: arrowSize + 'px',
+                        height: arrowSize + 'px',
+                    }"
+                    v-else
+                ></div>
+
+            </div>
+
+            <!-- 复选框-->
+            <q-checkbox
+                class="q-tree__tickbox"
+                :model-value="item.m.indeterminate === true ? null : item.m.ticked"
+                :color="computedControlColor"
+                :dark="isDark"
+                :disable="item.m.tickable !== true"
+                dense
+                keep-color
+                @keydown="stopAndPrevent"
+                @update:model-value="v => { onTickedClick(item.m, v) }"
+                v-show="! multiple"
+                v-if="item.m.hasTicking === true && item.m.noTick !== true"
+            />
+
+            <!-- 节点内容 -->
+            <div
+                class="n-tree__node-content"
+                @click="onClick(item.node, item.m, $event)"
+            >
+                <!-- 默认头部插槽 -->
+                <slot
+                    name="default-header"
+                    :node="item.node"
+                    :expanded="item.m.expanded"
+                    :ticked="item.m.indeterminate === true ? null : item.m.ticked"
+                    :key="item.key"
+                    :dark="isDark"
+                    v-if="hasSlots.defaultHeader"
+                />
+                <!-- 否则为文字 -->
+                <span v-else>{{ item.label }}</span>
+            </div>
+
+            <!-- 节点插槽 -->
+            <slot
+                name="node"
+                :node="item.node"
+                :expanded="item.m.expanded"
+                :ticked="item.m.indeterminate === true ? null : item.m.ticked"
+                :key="item.key"
+                :dark="isDark"
+                v-if="hasSlots.node"
+            />
+
+        </div>
+    </component>
+</template>
+
+<script>
+import {
+    ref, computed, watch,
+    nextTick, getCurrentInstance, onBeforeUpdate, onMounted, onUnmounted
+} from 'vue'
+
+import { stopAndPrevent } from 'quasar/src/utils/event'
+
+import QVirtualScroll from 'quasar/src/components/virtual-scroll/QVirtualScroll'
+import NVirtualScroll from '../virtual-scroll'
+
+const tickStrategyOptions = [ 'none', 'strict', 'leaf', 'leaf-filtered' ]
+
+import $n_has from 'lodash/has'
+import $n_get from 'lodash/get'
+import $n_isFunction from 'lodash/isFunction'
+import $n_findIndex from 'lodash/findIndex'
+
+import $n_trimString from '@netang/utils/trimString'
+import $n_isValidArray from '@netang/utils/isValidArray'
+import $n_indexOf from '@netang/utils/indexOf'
+import $n_on from '@netang/utils/on'
+import $n_off from '@netang/utils/off'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NTree',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        dark: {
+            type: Boolean,
+            default: null
+        },
+        nodes: {
+            type: [ Array, Object ],
+            required: true
+        },
+        nodeKey: {
+            type: String,
+            required: true
+        },
+        labelKey: {
+            type: String,
+            default: 'label'
+        },
+        childrenKey: {
+            type: String,
+            default: 'children'
+        },
+
+        dense: Boolean,
+
+        color: String,
+        controlColor: String,
+        textColor: String,
+        selectedColor: String,
+
+        icon: String,
+        iconProps: Object,
+
+        tickStrategy: {
+            type: String,
+            default: 'none',
+            validator: v => tickStrategyOptions.includes(v)
+        },
+        ticked: Array, // v-model:ticked
+        expanded: Array, // v-model:expanded
+        selected: {}, // v-model:selected
+
+        noSelectionUnset: Boolean,
+
+        defaultExpandAll: Boolean,
+        accordion: Boolean,
+
+        filter: String,
+        filterMethod: Function,
+
+        duration: Number,
+        noConnectors: Boolean,
+        noTransition: Boolean,
+
+        noNodesLabel: String,
+        noResultsLabel: String,
+
+        // 【覆盖声明】-------------------------------------------------------
+
+        // 是否选择的是树节点数据(false:节点键值, true:节点数据)
+        selectedNode: Boolean,
+
+        // 是否开启拖拽
+        draggable: Boolean,
+        // 是否禁止上下推拽
+        noDragUpDown: Boolean,
+        // 判断节点能否被拖拽
+        allowDrag: Function,
+        // 拖拽时判定目标节点能否被放置, type 参数: top / inner / bottom / none ( 目标节点上方 / 目标节点内部 / 目标节点下方 / 无任何操作 )
+        allowDrop: Function,
+        // 是否多选
+        multiple: Boolean,
+        // 以像素为单位的默认行大小
+        virtualScrollItemSize: {
+            type: [ Number, String ],
+            default: 29,
+        },
+        // 虚拟滚动声明
+        virtualScrollProps: Object,
+        // 是否为自定义虚拟滚动
+        isNVirtualScroll: Boolean,
+
+        // 箭头大小
+        arrowSize: {
+            type: Number,
+            default: 16,
+        },
+    },
+
+    /**
+     * 声明事件
+     */
+    emits: [
+        'update:expanded',
+        'update:ticked',
+        'update:selected',
+        'lazyLoad',
+        'afterShow',
+        'afterHide',
+
+        'nodeDragStart',
+        'nodeDragEnter',
+        'nodeDragOver',
+        'nodeDragLeave',
+        'nodeDragEnd',
+    ],
+
+    /**
+     * 组合式
+     */
+    setup (props, { slots, emit }) {
+
+        const { proxy } = getCurrentInstance()
+        const { $q } = proxy
+
+        // ==========【数据】=========================================================================================
+
+        // 懒加载
+        const lazy = ref({})
+        // 已选节点数组
+        const innerTicked = ref(props.ticked || [])
+        // 已展开节点数组
+        const innerExpanded = ref(props.expanded || [])
+
+        let blurTargets = {}
+
+        // 是否拖拽中
+        const dragging = ref(false)
+        // 拖拽中节点
+        const draggingNode = ref(null)
+        // 放置节点
+        const dropNode = ref(null)
+
+        const dragClasses = ref({})
+        const ctrlDown = ref(false)
+        const shiftDown = ref(false)
+        const shiftDownNodeKey = ref(null)
+
+        // ==========【计算属性】=========================================================================================
+
+        /**
+         * 是否暗黑模式
+         */
+        const isDark = computed(() => (
+            props.dark === null
+                ? $q.dark.isActive
+                : props.dark
+        ))
+
+        /**
+         * 类名
+         */
+        const classes = computed(() =>
+            `n-tree n-tree--${ props.dense === true ? 'dense' : 'standard' }`
+            // + (props.noConnectors === true ? ' q-tree--no-connectors' : '')
+            + (isDark.value === true ? ' n-tree--dark' : '')
+            + (props.color !== void 0 ? ` text-${ props.color }` : '')
+        )
+
+        /**
+         * 是否有已选数据
+         */
+        const hasSelection = computed(() => props.selected !== void 0)
+
+        /**
+         * 图标
+         */
+        const computedIcon = computed(() => props.icon || $q.iconSet.tree.icon)
+
+        /**
+         * 控件颜色(复选框 / 旋转器)
+         */
+        const computedControlColor = computed(() => props.controlColor || props.color)
+
+        /**
+         * 当前已选数据键值
+         */
+        const currentSelectedKey = computed(function () {
+            return props.selectedNode ? props.selected[props.nodeKey] : props.selected
+        })
+
+        /**
+         * 文本颜色类名
+         */
+        // const textColorClass = computed(() => (
+        //     props.textColor !== void 0
+        //         ? ` text-${ props.textColor }`
+        //         : ''
+        // ))
+
+        /**
+         * 已选颜色类名
+         */
+        // const selectedColorClass = computed(() => {
+        //     const color = props.selectedColor || props.color
+        //     return color ? ` text-${ color }` : ''
+        // })
+
+        /**
+         * 过滤节点方法
+         */
+        const computedFilterMethod = computed(() => (
+            props.filterMethod !== void 0
+                ? props.filterMethod
+                : function (node, filter) {
+                    const label = $n_trimString(node[ props.labelKey ])
+                    return label && label.toLowerCase().indexOf(filter.toLowerCase()) > -1
+                }
+        ))
+
+        /**
+         * meta
+         */
+        const meta = computed(() => {
+            const meta = {}
+
+            const travel = (node, parent) => {
+                const tickStrategy = node.tickStrategy || (parent ? parent.tickStrategy : props.tickStrategy)
+                const
+                    key = node[ props.nodeKey ],
+                    isParent = node[ props.childrenKey ] && node[ props.childrenKey ].length > 0,
+                    selectable = node.disabled !== true && hasSelection.value === true && node.selectable !== false,
+                    expandable = node.disabled !== true && node.expandable !== false,
+                    hasTicking = tickStrategy !== 'none',
+                    strictTicking = tickStrategy === 'strict',
+                    leafFilteredTicking = tickStrategy === 'leaf-filtered',
+                    leafTicking = tickStrategy === 'leaf' || tickStrategy === 'leaf-filtered'
+
+                let tickable = node.disabled !== true && node.tickable !== false
+                if (leafTicking === true && tickable === true && parent && parent.tickable !== true) {
+                    tickable = false
+                }
+
+                let localLazy = node.lazy
+                if (
+                    localLazy === true
+                    && lazy.value[ key ] !== void 0
+                    && Array.isArray(node[ props.childrenKey ]) === true
+                ) {
+                    localLazy = lazy.value[ key ]
+                }
+
+                const m = {
+                    key,
+                    parent,
+                    isParent,
+                    lazy: localLazy,
+                    disabled: node.disabled,
+                    // link: node.disabled !== true && (selectable === true || (expandable === true && (isParent === true || localLazy === true))),
+                    children: [],
+                    matchesFilter: props.filter ? computedFilterMethod.value(node, props.filter) : true,
+
+                    selected: key === currentSelectedKey.value && selectable === true,
+                    selectable,
+                    expanded: isParent === true ? innerExpanded.value.includes(key) : false,
+                    expandable,
+                    noTick: node.noTick === true || (strictTicking !== true && localLazy && localLazy !== 'loaded'),
+                    tickable,
+                    tickStrategy,
+                    hasTicking,
+                    strictTicking,
+                    leafFilteredTicking,
+                    leafTicking,
+                    ticked: strictTicking === true
+                        ? innerTicked.value.includes(key)
+                        : (isParent === true ? false : innerTicked.value.includes(key)),
+
+                    childrens: [],
+                }
+
+                meta[ key ] = m
+
+                if (isParent === true) {
+                    m.childrens = node[ props.childrenKey ]
+                    m.children = node[ props.childrenKey ].map(n => travel(n, m))
+
+                    if (props.filter) {
+                        if (m.matchesFilter !== true) {
+                            m.matchesFilter = m.children.some(n => n.matchesFilter)
+                        }
+                        else if (
+                            m.noTick !== true
+                            && m.disabled !== true
+                            && m.tickable === true
+                            && leafFilteredTicking === true
+                            && m.children.every(n => n.matchesFilter !== true || n.noTick === true || n.tickable !== true) === true
+                        ) {
+                            m.tickable = false
+                        }
+                    }
+
+                    if (m.matchesFilter === true) {
+                        if (m.noTick !== true && strictTicking !== true && m.children.every(n => n.noTick) === true) {
+                            m.noTick = true
+                        }
+
+                        if (leafTicking) {
+                            m.ticked = false
+                            m.indeterminate = m.children.some(node => node.indeterminate === true)
+                            m.tickable = m.tickable === true && m.children.some(node => node.tickable)
+
+                            if (m.indeterminate !== true) {
+                                const sel = m.children
+                                    .reduce((acc, meta) => (meta.ticked === true ? acc + 1 : acc), 0)
+
+                                if (sel === m.children.length) {
+                                    m.ticked = true
+                                }
+                                else if (sel > 0) {
+                                    m.indeterminate = true
+                                }
+                            }
+
+                            if (m.indeterminate === true) {
+                                m.indeterminateNextState = m.children
+                                    .every(meta => meta.tickable !== true || meta.ticked !== true)
+                            }
+                        }
+                    }
+                }
+
+                return m
+            }
+
+            props.nodes.forEach(node => travel(node, null))
+            return meta
+        })
+
+        // ==========【监听数据】=========================================================================================
+
+        /**
+         * 监听已选节点数据
+         */
+        watch(() => props.ticked, val => {
+            innerTicked.value = val
+        })
+
+        /**
+         * 监听已展开节点数据
+         */
+        watch(() => props.expanded, val => {
+            innerExpanded.value = val
+        })
+
+        /**
+         * 通过指定 key 获取树节点
+         */
+        function getNodeByKey (key) {
+            const reduce = [].reduce
+
+            const find = (result, node) => {
+                if (result || !node) {
+                    return result
+                }
+                if (Array.isArray(node) === true) {
+                    return reduce.call(Object(node), find, result)
+                }
+                if (node[ props.nodeKey ] === key) {
+                    return node
+                }
+                if (node[ props.childrenKey ]) {
+                    return find(null, node[ props.childrenKey ])
+                }
+            }
+
+            return find(null, props.nodes)
+        }
+
+        /**
+         * 获取已选树节点数组
+         */
+        function getTickedNodes () {
+            return innerTicked.value.map(key => getNodeByKey(key))
+        }
+
+        /**
+         * 获取已展开树节点数组
+         */
+        function getExpandedNodes () {
+            return innerExpanded.value.map(key => getNodeByKey(key))
+        }
+
+        /**
+         * 确定节点是否展开
+         */
+        function isExpanded (key) {
+            return key && meta.value[ key ]
+                ? meta.value[ key ].expanded
+                : false
+        }
+
+        /**
+         * 用于折叠树的所有分支
+         */
+        function collapseAll () {
+            if (props.expanded !== void 0) {
+                emit('update:expanded', [])
+            }
+            else {
+                innerExpanded.value = []
+            }
+        }
+
+        /**
+         * 用于展开树的所有分支
+         */
+        function expandAll () {
+            const
+                expanded = innerExpanded.value,
+                travel = node => {
+                    if (node[ props.childrenKey ] && node[ props.childrenKey ].length > 0) {
+                        if (node.expandable !== false && node.disabled !== true) {
+                            expanded.push(node[ props.nodeKey ])
+                            node[ props.childrenKey ].forEach(travel)
+                        }
+                    }
+                }
+
+            props.nodes.forEach(travel)
+
+            if (props.expanded !== void 0) {
+                emit('update:expanded', expanded)
+            }
+            else {
+                innerExpanded.value = expanded
+            }
+        }
+
+        /**
+         * 在给定键的节点处展开树
+         */
+        function setExpanded (key, state, node = getNodeByKey(key), m = meta.value[ key ]) {
+            if (m.lazy && m.lazy !== 'loaded') {
+                if (m.lazy === 'loading') {
+                    return
+                }
+
+                lazy.value[ key ] = 'loading'
+                if (Array.isArray(node[ props.childrenKey ]) !== true) {
+                    node[ props.childrenKey ] = []
+                }
+                emit('lazyLoad', {
+                    node,
+                    key,
+                    done: children => {
+                        lazy.value[ key ] = 'loaded'
+                        node[ props.childrenKey ] = Array.isArray(children) === true ? children : []
+                        nextTick(() => {
+                            const localMeta = meta.value[ key ]
+                            if (localMeta && localMeta.isParent === true) {
+                                localSetExpanded(key, true)
+                            }
+                        })
+                    },
+                    fail: () => {
+                        delete lazy.value[ key ]
+                        if (node[ props.childrenKey ].length === 0) {
+                            delete node[ props.childrenKey ]
+                        }
+                    }
+                })
+            }
+            else if (m.isParent === true && m.expandable === true) {
+                localSetExpanded(key, state)
+            }
+        }
+
+        function localSetExpanded (key, state) {
+            let target = innerExpanded.value
+            const shouldEmit = props.expanded !== void 0
+
+            if (shouldEmit === true) {
+                target = target.slice()
+            }
+
+            if (state) {
+                if (props.accordion) {
+                    if (meta.value[ key ]) {
+                        const collapse = []
+                        if (meta.value[ key ].parent) {
+                            meta.value[ key ].parent.children.forEach(m => {
+                                if (m.key !== key && m.expandable === true) {
+                                    collapse.push(m.key)
+                                }
+                            })
+                        }
+                        else {
+                            props.nodes.forEach(node => {
+                                const k = node[ props.nodeKey ]
+                                if (k !== key) {
+                                    collapse.push(k)
+                                }
+                            })
+                        }
+                        if (collapse.length > 0) {
+                            target = target.filter(k => collapse.includes(k) === false)
+                        }
+                    }
+                }
+
+                target = target.concat([ key ])
+                    .filter((key, index, self) => self.indexOf(key) === index)
+            }
+            else {
+                target = target.filter(k => k !== key)
+            }
+
+            if (shouldEmit === true) {
+                emit('update:expanded', target)
+            }
+            else {
+                innerExpanded.value = target
+            }
+        }
+
+        /**
+         * 用于检查是否选中节点的复选框
+         */
+        function isTicked (key) {
+            return key && meta.value[ key ]
+                ? meta.value[ key ].ticked
+                : false
+        }
+
+        /**
+         * 添加节点复选框
+         */
+        function setTicked (keys, state) {
+            let target = innerTicked.value
+            const shouldEmit = props.ticked !== void 0
+
+            if (shouldEmit === true) {
+                target = target.slice()
+            }
+
+            if (state) {
+                target = target.concat(keys)
+                    .filter((key, index, self) => self.indexOf(key) === index)
+            }
+            else {
+                target = target.filter(k => keys.includes(k) === false)
+            }
+
+            if (shouldEmit === true) {
+                emit('update:ticked', target)
+            }
+        }
+
+        // function getSlotScope (node, meta, key) {
+        //     const scope = { tree: proxy, node, key, color: props.color, dark: isDark.value }
+        //
+        //     injectProp(
+        //         scope,
+        //         'expanded',
+        //         () => { return meta.expanded },
+        //         val => { val !== meta.expanded && setExpanded(key, val) }
+        //     )
+        //
+        //     injectProp(
+        //         scope,
+        //         'ticked',
+        //         () => { return meta.ticked },
+        //         val => { val !== meta.ticked && setTicked([ key ], val) }
+        //     )
+        //
+        //     return scope
+        // }
+
+        // function getChildren (nodes) {
+        //     return (
+        //         props.filter
+        //             ? nodes.filter(n => meta.value[ n[ props.nodeKey ] ].matchesFilter)
+        //             : nodes
+        //     ).map(child => getNode(child))
+        // }
+
+        // function getNodeMedia (node) {
+        //     if (node.icon !== void 0) {
+        //         return h(QIcon, {
+        //             class: 'q-tree__icon q-mr-sm',
+        //             name: node.icon,
+        //             color: node.iconColor
+        //         })
+        //     }
+        //     const src = node.img || node.avatar
+        //     if (src) {
+        //         return h('img', {
+        //             class: `q-tree__${ node.img ? 'img' : 'avatar' } q-mr-sm`,
+        //             src
+        //         })
+        //     }
+        // }
+
+        function onShow () {
+            emit('afterShow')
+        }
+
+        function onHide () {
+            emit('afterHide')
+        }
+
+        // function getNode (node) {
+        //     const
+        //         key = node[ props.nodeKey ],
+        //         m = meta.value[ key ],
+        //         header = node.header
+        //             ? slots[ `header-${ node.header }` ] || slots[ 'default-header' ]
+        //             : slots[ 'default-header' ]
+        //
+        //     const children = m.isParent === true
+        //         ? getChildren(node[ props.childrenKey ])
+        //         : []
+        //
+        //     const isParent = children.length > 0 || (m.lazy && m.lazy !== 'loaded')
+        //
+        //     let body = node.body
+        //         ? slots[ `body-${ node.body }` ] || slots[ 'default-body' ]
+        //         : slots[ 'default-body' ]
+        //     const slotScope = header !== void 0 || body !== void 0
+        //         ? getSlotScope(node, m, key)
+        //         : null
+        //
+        //     if (body !== void 0) {
+        //         body = h('div', { class: 'q-tree__node-body relative-position' }, [
+        //             h('div', { class: textColorClass.value }, [
+        //                 body(slotScope)
+        //             ])
+        //         ])
+        //     }
+        //
+        //     return h('div', {
+        //         key,
+        //         class: 'q-tree__node relative-position'
+        //             + ` q-tree__node--${ isParent === true ? 'parent' : 'child' }`
+        //     }, [
+        //         h('div', {
+        //             class: 'q-tree__node-header relative-position row no-wrap items-center'
+        //                 // + (m.link === true ? ' q-tree__node--link q-hoverable q-focusable' : '')
+        //                 + (m.selected === true ? ' n-tree__node--selected' : '')
+        //                 + (m.disabled === true ? ' q-tree__node--disabled' : ''),
+        //             tabindex: m.link === true ? 0 : -1,
+        //             onClick: (e) => {
+        //                 onClick(node, m, e)
+        //             },
+        //             onKeypress (e) {
+        //                 if (shouldIgnoreKey(e) !== true) {
+        //                     if (e.keyCode === 13) { onClick(node, m, e, true) }
+        //                     else if (e.keyCode === 32) { onExpandClick(node, m, e, true) }
+        //                 }
+        //             }
+        //         }, [
+        //             h('div', {
+        //                 class: 'q-focus-helper',
+        //                 tabindex: -1,
+        //                 ref: el => { blurTargets[ m.key ] = el }
+        //             }),
+        //
+        //             m.lazy === 'loading'
+        //                 ? h(QSpinner, {
+        //                     class: 'q-tree__spinner',
+        //                     color: computedControlColor.value
+        //                 })
+        //                 : (
+        //                     isParent === true
+        //                         ? h(QIcon, {
+        //                             class: 'q-tree__arrow'
+        //                                 + (m.expanded === true ? ' q-tree__arrow--rotate' : ''),
+        //                             name: computedIcon.value,
+        //                             onClick (e) { onExpandClick(node, m, e) }
+        //                         })
+        //                         : null
+        //                 ),
+        //
+        //             m.hasTicking === true && m.noTick !== true
+        //                 ? h(QCheckbox, {
+        //                     class: 'q-tree__tickbox',
+        //                     modelValue: m.indeterminate === true ? null : m.ticked,
+        //                     color: computedControlColor.value,
+        //                     dark: isDark.value,
+        //                     dense: true,
+        //                     keepColor: true,
+        //                     disable: m.tickable !== true,
+        //                     onKeydown: stopAndPrevent,
+        //                     'onUpdate:modelValue': v => {
+        //                         onTickedClick(m, v)
+        //                     }
+        //                 })
+        //                 : null,
+        //
+        //             h('div', {
+        //                 class: 'q-tree__node-header-content col row no-wrap items-center'
+        //                     + (m.selected === true ? selectedColorClass.value : textColorClass.value)
+        //             }, [
+        //                 header
+        //                     ? header(slotScope)
+        //                     : [
+        //                         getNodeMedia(node),
+        //                         h('div', node[ props.labelKey ])
+        //                     ]
+        //             ])
+        //         ]),
+        //
+        //         isParent === true
+        //             ? (
+        //                 props.noTransition === true
+        //                     ? h('div', {
+        //                         class: 'q-tree__node-collapsible' + textColorClass.value,
+        //                         key: `${ key }__q`
+        //                     }, [
+        //                         body,
+        //                         h('div', {
+        //                             class: 'q-tree__children'
+        //                                 + (m.disabled === true ? ' q-tree__node--disabled' : '')
+        //                         }, m.expanded ? children : null)
+        //                     ])
+        //
+        //                     : h(QSlideTransition, {
+        //                         duration: props.duration,
+        //                         onShow,
+        //                         onHide
+        //                     }, () => withDirectives(
+        //                         h('div', {
+        //                             class: 'q-tree__node-collapsible' + textColorClass.value,
+        //                             key: `${ key }__q`
+        //                         }, [
+        //                             body,
+        //                             h('div', {
+        //                                 class: 'q-tree__children'
+        //                                     + (m.disabled === true ? ' q-tree__node--disabled' : '')
+        //                             }, children)
+        //                         ]),
+        //                         [ [ vShow, m.expanded ] ]
+        //                     ))
+        //             )
+        //             : body
+        //     ])
+        // }
+
+        /**
+         * 失去焦点
+         */
+        function blur (key) {
+            const blurTarget = blurTargets[ key ]
+            blurTarget && blurTarget.focus()
+        }
+
+        /**
+         * 点击节点
+         */
+        function onClick (node, meta, e, keyboard) {
+
+            keyboard !== true && meta.selectable !== false && blur(meta.key)
+
+            // 如果有 v-model:selected
+            if (hasSelection.value && meta.selectable) {
+
+                if (props.noSelectionUnset === false) {
+                    emit('update:selected', meta.key !== currentSelectedKey.value ? (
+                        props.selectedNode ? node : meta.key
+                    ) : null)
+
+                } else if (meta.key !== currentSelectedKey.value) {
+                    emit('update:selected', meta.key === void 0 ? null : (
+                        props.selectedNode ? node : meta.key
+                    ))
+                }
+
+            } else {
+
+                // 如果是父节点
+                if (meta.isParent && ! props.multiple) {
+                    // 则展开点击
+                    onExpandClick(node, meta, e, keyboard)
+
+                // 如果有复选框
+                } else if (meta.hasTicking === true && meta.noTick !== true) {
+
+                    // 如果有复选框
+                    if (props.multiple) {
+
+                        // 如果按下 shfit
+                        if (shiftDown.value) {
+
+                            // 如果没有选中节点
+                            if (! innerTicked.value.length) {
+                                updateTicked([meta.key])
+                                return
+                            }
+
+                            const {
+                                length,
+                            } = innerTicked.value
+
+                            // 如果只选中一个节点 && 该节点为当前点击的节点
+                            if (length === 1 && innerTicked.value[0] === meta.key) {
+                                return
+                            }
+
+                            // 如果没有 shift 按下节点
+                            if (shiftDownNodeKey.value === null) {
+                                // 则设置最后一个选中节点为 shift 按下节点
+                                shiftDownNodeKey.value = innerTicked.value[length - 1]
+                            }
+
+                            // 获取最后一个选中节点
+                            const lastTickedKey = shiftDownNodeKey.value
+
+                            let lastIndex
+                            let selectedIndex
+
+                            for (let i = currentChildren.value.length - 1; i >= 0 ; i--) {
+                                const item = currentChildren.value[i]
+                                if (item.key === lastTickedKey) {
+                                    lastIndex = i
+                                } else if (item.key === meta.key) {
+                                    selectedIndex = i
+                                }
+                            }
+
+                            let startIndex
+                            let endIndex
+
+                            // 如果选择数据在最后一条数据前
+                            if (selectedIndex < lastIndex) {
+                                startIndex = selectedIndex
+                                endIndex = lastIndex
+
+                            // 如果选择数据在最后一条数据后
+                            } else if (selectedIndex > lastIndex) {
+                                startIndex = lastIndex
+                                endIndex = selectedIndex
+                            }
+
+                            const newTicked = []
+                            for (let i = startIndex; i <= endIndex; i++) {
+                                const item = currentChildren.value[i]
+                                if (item.m.tickable === true) {
+                                    newTicked.push(item.key)
+                                }
+                            }
+                            updateTicked(newTicked)
+
+                        // 如果按下 ctrl
+                        } else if (ctrlDown.value) {
+                            setTicked([meta.key], true)
+
+                        // 否则只是点击
+                        } else {
+                            updateTicked([meta.key])
+                        }
+                        return
+                    }
+
+                    // 否则复选框点击
+                    const isTicked = meta.indeterminate === true ? null : meta.ticked
+                    onTickedClick(meta, ! isTicked)
+                }
+            }
+
+            if (typeof node.handler === 'function') {
+                node.handler(node)
+            }
+        }
+
+        /**
+         * 展开点击
+         */
+        function onExpandClick (node, meta, e, keyboard) {
+            if (e !== void 0) {
+                stopAndPrevent(e)
+            }
+            keyboard !== true && meta.selectable !== false && blur(meta.key)
+            setExpanded(meta.key, !meta.expanded, node, meta)
+        }
+
+        /**
+         * 复选框点击
+         */
+        function onTickedClick (meta, state) {
+            if (meta.indeterminate === true) {
+                state = meta.indeterminateNextState
+            }
+            if (meta.strictTicking) {
+                setTicked([ meta.key ], state)
+            }
+            else if (meta.leafTicking) {
+                const keys = []
+                const travel = meta => {
+                    if (meta.isParent) {
+                        if (state !== true && meta.noTick !== true && meta.tickable === true) {
+                            keys.push(meta.key)
+                        }
+                        if (meta.leafTicking === true) {
+                            meta.children.forEach(travel)
+                        }
+                    }
+                    else if (
+                        meta.noTick !== true
+                        && meta.tickable === true
+                        && (meta.leafFilteredTicking !== true || meta.matchesFilter === true)
+                    ) {
+                        keys.push(meta.key)
+                    }
+                }
+                travel(meta)
+                setTicked(keys, state)
+            }
+        }
+
+        // 默认展开全部
+        props.defaultExpandAll === true && expandAll()
+
+        // expose public methods
+        // Object.assign(proxy, {
+        //     getNodeByKey,
+        //     getTickedNodes,
+        //     getExpandedNodes,
+        //     isExpanded,
+        //     collapseAll,
+        //     expandAll,
+        //     setExpanded,
+        //     isTicked,
+        //     setTicked
+        // })
+
+        // return () => {
+        //     const children = getChildren(props.nodes)
+        //
+        //     return h(
+        //         'div', {
+        //             class: classes.value
+        //         },
+        //         children.length === 0
+        //             ? (
+        //                 props.filter
+        //                     ? props.noResultsLabel || $q.lang.tree.noResults
+        //                     : props.noNodesLabel || $q.lang.tree.noNodes
+        //             )
+        //             : children
+        //     )
+        // }
+
+        // ==========【覆盖部分】=========================================================================================
+
+        /**
+         * 是否有默认插槽
+         */
+        const hasSlots = computed(function () {
+            return {
+                defaultHeader: $n_has(slots, 'default-header'),
+                node: $n_has(slots, 'node'),
+            }
+        })
+
+        /**
+         * 点击节点
+         */
+        function onNode(item, $event) {
+            if (
+                item.m.lazy !== 'loading'
+                && item.isParent === true
+            ) {
+                onExpandClick(item.node, item.m, $event)
+            } else {
+                onClick(item.node, item.m, $event)
+            }
+        }
+
+        /**
+         * 获取节点
+         */
+        function getNode(nodes, level, parents) {
+
+            const lists = []
+
+            // 如果有过滤方法
+            if (props.filter) {
+                nodes = nodes.filter(n => meta.value[ n[ props.nodeKey ] ].matchesFilter)
+            }
+
+            for (const node of nodes) {
+
+                const key = node[ props.nodeKey ]
+                const m = meta.value[ key ]
+
+                // 孩子节点
+                const children = m.isParent === true
+                    ? node[ props.childrenKey ]
+                    : []
+
+                // 是否为父节点
+                const isParent = children.length > 0 || (m.lazy && m.lazy !== 'loaded')
+
+                // 拖拽类名
+                const dragCss = $n_get(dragClasses.value, key)
+
+                // 当前节点类名
+                const classes = 'n-tree__node relative-position row no-wrap q-tree__node--link q-hoverable'
+                        // + (m.link === true ? ' q-tree__node--link q-hoverable q-focusable' : '')
+                        + (! dragging.value && (m.selected === true || props.multiple && m.ticked === true) ? ' n-tree__node--selected' : '')
+                        + (m.disabled === true ? ' q-tree__node--disabled' : '')
+                        + (dragCss ? ' ' + dragCss : '')
+
+                lists.push({
+                    classes,
+                    key,
+                    label: node[ props.labelKey ],
+                    m,
+                    isParent,
+                    level,
+                    parents,
+                    node,
+                })
+
+                // 如果当前节点在展开节点中
+                if (
+                    isParent
+                    && $n_indexOf(innerExpanded.value, key) > -1
+                ) {
+                    const childNodes = getNode(node[ props.childrenKey ], level + 1, [...parents, key])
+                    if (childNodes.length) {
+                        lists.push(...childNodes)
+                    }
+                }
+            }
+
+            return lists
+        }
+
+        /**
+         * 当前节点
+         */
+        const currentChildren = computed(function () {
+            if ($n_isValidArray(props.nodes)) {
+                return getNode(props.nodes, 0, [])
+            }
+            return []
+        })
+
+        // -------------------------------------------------------------------------------------------------
+
+        /**
+         * 更新节点复选框
+         */
+        function updateTicked (keys) {
+            if (props.ticked !== void 0) {
+                emit('update:ticked', keys)
+            } else {
+                innerTicked.value = keys
+            }
+        }
+
+        /**
+         * 按键按下
+         */
+        function onKeydown({ keyCode, shiftKey }) {
+
+            // 如果是 shift
+            if (keyCode === 16 || shiftKey) {
+                ctrlDown.value = false
+                shiftDown.value = true
+
+            // 如果是 ctrl
+            } else if (keyCode === 17) {
+                ctrlDown.value = true
+                shiftDown.value = false
+                shiftDownNodeKey.value = null
+
+            // 否则其他
+            } else {
+                onKeyup()
+            }
+        }
+
+        /**
+         * 按键弹起
+         */
+        function onKeyup() {
+            ctrlDown.value = false
+            shiftDown.value = false
+            shiftDownNodeKey.value = null
+        }
+
+        /**
+         * 鼠标点击
+         */
+        function onMouseDown() {
+            // 如果开启拖拽
+            if (props.draggable) {
+                // 设置拖拽中
+                dragging.value = true
+            }
+        }
+
+        /**
+         * 拖拽开始
+         */
+        function onDragStart(e, item) {
+
+            // 如果开启拖拽
+            if (props.draggable) {
+
+                // 判断节点能否被拖拽
+                if (
+                    $n_isFunction(props.allowDrag)
+                    && ! props.allowDrag(item.node)
+                ) {
+                    e.preventDefault()
+                    return false
+                }
+
+                e.dataTransfer.effectAllowed = 'move'
+
+                // wrap in try catch to address IE's error when first param is 'text/plain'
+                try {
+                    // setData is required for draggable to work in FireFox
+                    // the content has to be '' so dragging a node out of the tree won't open a new tab in FireFox
+                    e.dataTransfer.setData('text/plain', '')
+                } catch {}
+
+                // 设置拖拽中
+                dragging.value = true
+
+                // 设置拖拽中节点
+                draggingNode.value = item
+
+                // 设置节点类名
+                dragClasses.value[item.key] = 'dragging--before'
+
+                emit('nodeDragStart', item.node, e)
+            }
+        }
+
+        /**
+         * 拖拽进入
+         */
+        function onDragEnter(e, item, isOver) {
+
+            // 如果开启拖拽
+            if (props.draggable) {
+
+                dropNode.value = null
+
+                // 如果拖拽中
+                if (dragging.value) {
+
+                    const {
+                        key: fromKey,
+                    } = draggingNode.value
+
+                    // 设置节点类名
+                    if (! isOver) {
+                        dragClasses.value[draggingNode.value.key] = 'dragging'
+                    }
+
+                    let type
+
+                    if (
+                        // 如果被拖动节点 === 拖动只节点
+                        fromKey === item.key
+                        // 如果拖动的节点 在 被拖动节点的父级节点中
+                        || $n_indexOf(item.parents, fromKey) > -1
+                    ) {
+                        type = 'none'
+
+                    } else {
+
+                        // 如果禁止上下拖拽
+                        if (props.noDragUpDown) {
+                            type = 'inner'
+
+                        } else {
+
+                            const {
+                                top,
+                                height,
+                            } = e.target.getBoundingClientRect()
+
+                            const dY = e.clientY - top
+
+                            // 目标节点上方
+                            if (dY <= height * 0.3) {
+
+                                type = 'top'
+
+                            // 目标节点内部
+                            } else if (dY <= height * (0.7)) {
+
+                                type = 'inner'
+
+                            // 目标节点下方
+                            } else {
+                                type = 'bottom'
+                            }
+                        }
+
+                        // 拖拽时判定目标节点能否被放置, type 参数有三种情况: top / inner / bottom ( 目标节点上方 / 目标节点内部 / 目标节点下方 )
+                        if ($n_isFunction(props.allowDrop)) {
+                            const res = props.allowDrop(draggingNode.value.node, item.node, type)
+                            if (res !== true) {
+                                type = 'none'
+                            }
+                        }
+
+                        if (type !== 'none') {
+                            dragClasses.value[item.key] = `drag-over--${type}`
+                        }
+                    }
+
+                    // 为需要移动的元素设置 dragstart 事件
+                    // e.dataTransfer.effectAllowed = 'move'
+
+                    // 设置放置节点
+                    dropNode.value = {
+                        item,
+                        type,
+                    }
+
+                    emit(isOver ? 'nodeDragOver' : 'nodeDragEnter', draggingNode.value.node, item.node, e)
+                }
+            }
+        }
+
+        /**
+         * 拖拽结束
+         */
+        function onDragEnd(e) {
+
+            // 如果开启拖拽
+            if (props.draggable) {
+
+                if (draggingNode.value) {
+
+                    const draggingNodeKey = draggingNode.value.key
+
+                    dragClasses.value[draggingNodeKey] = ''
+
+                    if (dropNode.value) {
+
+                        const dropType = dropNode.value.type
+
+                        // 执行放置节点
+                        function doDrop() {
+
+                            // 放置类型 !== 'none'
+                            if (dropType !== 'none') {
+
+                                const dropNodeKey = dropNode.value.item.key
+
+                                // 删除拖拽中的节点
+                                function remove() {
+                                    const {
+                                        parent
+                                    } = draggingNode.value.m
+                                    const children = parent ? parent.childrens : props.nodes
+                                    const index = $n_findIndex(children, e => e[props.nodeKey] === draggingNodeKey)
+                                    if (index > -1) {
+                                        children.splice(index, 1)
+                                    }
+                                }
+
+                                // 如果放置目标节点内部
+                                if (dropType === 'inner') {
+                                    if (dropNode.value.item.m.childrens.length) {
+
+                                        // 判断该节点是否在内部
+                                        if ($n_findIndex(dropNode.value.item.m.childrens, e => e[props.nodeKey] === draggingNodeKey) > -1) {
+                                            // console.log('不用拖拽，在节点内部')
+                                            return false
+                                        }
+
+                                        remove()
+                                        dropNode.value.item.m.childrens.push(draggingNode.value.node)
+                                        return dropNode.value.item.m.childrens
+                                    }
+
+                                    remove()
+                                    dropNode.value.item.node[props.childrenKey] = [ draggingNode.value.node ]
+                                    return dropNode.value.item.node[props.childrenKey]
+
+                                // 否则放置目标节点上下
+                                } else {
+                                    const dropParent = dropNode.value.item.m.parent
+                                    const dropChildren = dropParent ? dropParent.childrens : props.nodes
+                                    let dropIndex = $n_findIndex(dropChildren, e => e[props.nodeKey] === dropNodeKey)
+                                    if (dropIndex > -1) {
+
+                                        // 如果移动至上方
+                                        if (dropType === 'top') {
+                                            if (dropIndex > 0) {
+                                                const dropTopItem = dropChildren[dropIndex - 1]
+                                                if (dropTopItem[props.nodeKey] === draggingNodeKey) {
+                                                    // console.log('不用拖拽，拖到上方的就是被拖拽节点自己')
+                                                    return false
+                                                }
+                                            }
+
+                                        // 否则移动到下方
+                                        } else if (dropIndex + 1 < dropChildren.length) {
+                                            const dropTopItem = dropChildren[dropIndex + 1]
+                                            if (dropTopItem[props.nodeKey] === draggingNodeKey) {
+                                                // console.log('不用拖拽，拖到下方的就是被拖拽节点自己')
+                                                return false
+                                            }
+                                        }
+
+                                        remove()
+                                        dropIndex = $n_findIndex(dropChildren, e => e[props.nodeKey] === dropNodeKey)
+                                        if (dropIndex > -1) {
+                                            dropChildren.splice(dropType === 'top' ? dropIndex : dropIndex + 1, 0, draggingNode.value.node)
+                                            return dropChildren
+                                        }
+                                    }
+                                }
+                            }
+                            return false
+                        }
+
+                        emit('nodeDragEnd', draggingNode.value.node, dropNode.value.item.node, dropType, doDrop, e)
+
+                    } else {
+                        emit('nodeDragEnd', draggingNode.value.node, null, 'none', () => props.nodes, e)
+                    }
+                }
+
+                draggingNode.value = null
+                dropNode.value = null
+                dragging.value = false
+            }
+        }
+
+        /**
+         * 拖拽离开
+         */
+        function onDragLeave(e, item) {
+
+            // 如果开启拖拽
+            if (props.draggable) {
+                if (draggingNode.value) {
+                    if (item.key === draggingNode.value.key) {
+                        return
+                    }
+                    dragClasses.value[item.key] = ''
+
+                    emit('nodeDragLeave', draggingNode.value.node, item.node, e)
+                }
+            }
+        }
+
+        // ==========【生命周期】=========================================================================================
+
+        /**
+         * 更新 DOM 之前调用
+         */
+        onBeforeUpdate(function () {
+            blurTargets = {}
+        })
+
+        /**
+         * 实例被挂载后调用
+         */
+        onMounted(function() {
+            $n_on(document, 'keydown', onKeydown)
+            $n_on(document, 'keyup', onKeyup)
+        })
+
+        /**
+         * 实例被卸载后调用
+         */
+        onUnmounted(function () {
+            $n_off(document, 'keydown', onKeydown)
+            $n_off(document, 'keyup', onKeyup)
+        })
+
+        return {
+            classes,
+            computedIcon,
+            computedControlColor,
+            isDark,
+            onClick,
+            onExpandClick,
+            onTickedClick,
+            getNodeByKey,
+            getExpandedNodes,
+            getTickedNodes,
+            isExpanded,
+            setExpanded,
+            isTicked,
+            setTicked,
+            expandAll,
+            collapseAll,
+            stopAndPrevent,
+
+            hasSlots,
+            currentChildren,
+
+            onNode,
+            onMouseDown,
+            onDragStart,
+            onDragEnter,
+            onDragLeave,
+            onDragEnd,
+
+            NVirtualScroll,
+            QVirtualScroll,
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+@import "@/assets/sass/variables.scss";
+
+.n-tree {
+    color: $grey;
+
+    // 空箭头
+    &__arrow--noop {
+        //width: 16px;
+        //height: 16px;
+        margin-right: 4px;
+    }
+
+    // 树节点
+    &__node {
+        margin: 4px;
+        border-radius: 4px;
+        //transition: all .3s;
+        //background-color: green;
+
+        // 前置容器
+        &__prepend {
+            position: relative;
+            //height: 100% !important;
+            display: flex;
+            align-items: center;
+            //background-color: red;
+        }
+
+        // 已选
+        &--selected:not(.drag-over--inner) {
+            > .q-focus-helper {
+                background: currentColor;
+                opacity: 0.15 !important;
+            }
+        }
+
+        // 拖拽前
+        &.dragging--before {
+            > .q-focus-helper {
+                display: none;
+            }
+        }
+
+        // 拖拽中
+        &.dragging {
+            > .q-focus-helper {
+                background: transparent !important;
+                opacity: 1 !important;
+                border: 1px solid var(--q-primary);
+                &:before {
+                    background-color: var(--q-primary);
+                    opacity: 0.1 !important;
+                    box-sizing: border-box;
+                }
+                &:after {
+                    opacity: 0 !important;
+                }
+            }
+        }
+
+        // 拖拽至上方
+        &.drag-over--top {
+            .n-tree__node-content {
+                &:before {
+                    top: 0;
+                    margin-top: -3px;
+                }
+                &:after {
+                    border-top-color: var(--q-primary);
+                }
+            }
+        }
+
+        // 拖拽至内部
+        &.drag-over--inner {
+            color: rgba(255, 255, 255, 0.6);
+            > .q-focus-helper {
+                background-color: var(--q-primary) !important;
+                opacity: 1;
+            }
+            .n-tree__node-content {
+                color: #ffffff;
+            }
+        }
+
+        // 拖拽至底部
+        &.drag-over--bottom {
+            .n-tree__node-content {
+                &:before {
+                    bottom: 0;
+                    margin-bottom: -3px;
+                }
+                &:after {
+                    border-bottom-color: var(--q-primary);
+                }
+            }
+        }
+
+        &.drag-over--top,
+        &.drag-over--bottom {
+            .n-tree__node-content {
+                &:before {
+                    content: "";
+                    position: absolute;
+                    left: 0;
+                    margin-left: -8px;
+                    border-radius: 50%;
+                    width: 8px;
+                    height: 8px;
+                    border: 2px solid var(--q-primary);
+                    pointer-events: none;
+                }
+            }
+
+            > .q-focus-helper {
+                background-color: var(--q-primary);
+                opacity: 0.15;
+            }
+        }
+
+        // 拖拽内容
+        &-content {
+            position: relative;
+            display: flex;
+            flex: 1;
+            align-items: center;
+            padding: 4px 5px;
+            margin-left: -5px;
+            color: #000000;
+
+            &:after {
+                content: "";
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                border-top: 2px transparent solid;
+                border-bottom: 2px transparent solid;
+                pointer-events: none;
+            }
+        }
+    }
+
+    &--dark {
+        .n-tree__node-content {
+            color: #ffffff;
+        }
+
+        .n-tree__node {
+
+            // 已选
+            &--selected:not(.drag-over--inner) {
+                > .q-focus-helper {
+                    opacity: 0.3 !important;
+                }
+            }
+
+            // 拖拽中
+            &.dragging {
+                > .q-focus-helper {
+                    &:before {
+                        opacity: 0.3 !important;
+                    }
+                }
+            }
+
+            &.drag-over--top,
+            &.drag-over--bottom {
+                > .q-focus-helper {
+                    opacity: 0.3 !important;
+                }
+            }
+        }
+    }
+}
+</style>