ai.touchui-vue 1.31.3 → 1.32.0

package/packages/tree/src/treeItem.vue

@@ -1,443 +1,443 @@
-<template>
-	<ul v-if="nodes" @mouseenter="$emit('mouseenter')" @mouseleave="$emit('mouseleave')">
-		<template v-for="(node, nodeIndex) in nodes">
-			<li
-				v-if="node.show"
-				:key="nodeIndex"
-				:ref="node.value"
-				:class="{
-					disabled: node.disabled,
-					unfold: node.expanded && !node.isLeaf,
-					fold: !node.expanded && !node.isLeaf,
-					leaf: !node.children || node.isLeaf,
-					loading:node._loading,
-					on: highlightCurrent && node.value === currentNodeKey
-				}"
-				>
-				<div ref="node" v-tip.fg.right="!(node.children && node.children.length) && node.parent === '__root__' && ToTree.type === 'icon' ? node.label:''" class="content" @mouseenter="handleNodeEnter(node,nodeIndex)" @mouseleave="handleNodeLeave(node)">
-					<div class="ico" :style="setIconStyle" @click.stop="handleExpand(node)"><span></span></div>
-
-					<!--子节点展示选择框，父节点不展示-->
-					<div v-if="setCheckBoxStatus(node)" class="check"><to-checkbox v-model="node.checked" v-dis="node.disabled" padding="0.5" @change="handleCheck(node, $event, true)"></to-checkbox></div>
-					<div class="text" @click.stop="event => handleLabelClick(event,node)">
-						<slot :node="node">
-							<div class="to-tree-text-group">
-								<to-icon v-if="node.icon" class="to-tree-text-icon" mode="none" :value="node.icon"></to-icon>
-								<span class="to-tree-text-content">{{ node.label }}</span>
-							</div>
-						</slot>
-					</div>
-				</div>
-				<template v-if="node.children && node.children.length > 0 && !node.isLeaf">
-					<to-tree-item
-						:ref="`${node.value}_children`"
-						:parent="node.value"
-						:data="node.children"
-						:highlight-current="highlightCurrent"
-						:expand-on-click-node="expandOnClickNode"
-						:check-on-click-node="checkOnClickNode"
-						:show-checkbox="showCheckbox"
-						:is-parent-not-checkbox="isParentNotCheckbox"
-						:children-text="childrenText"
-						:value-text="valueText"
-						:label-text="labelText"
-						:icon-top="iconTop"
-						:disabled-text="disabledText"
-						:is-leaf-text="isLeafText"
-						:checked-text="checkedText"
-						:expanded-text="expandedText"
-						:check-strictly="checkStrictly"
-						:current-node-key="currentNodeKey"
-						:filter-node-method="filterNodeMethod"
-						:auto-expand-parent="autoExpandParent"
-						@mouseenter="handleLayerEnter(node)"
-						@mouseleave="handleLayerLeave(node)"
-						@current-change="handleCurrentNodeKeyChange"
-						@check="handleCheckChange"
-						@node-click="handleNodeClick"
-						@node-expand="handleNodeExpand"
-						@node-collapse="handleNodeCollapse"
-						>
-						<template v-slot="scope">
-							<slot :node="scope.node"></slot>
-						</template>
-					</to-tree-item>
-				</template>
-			</li>
-		</template>
-	</ul>
-</template>
-
-<script>
-export default {
-	name: 'ToTreeItem',
-	componentName: 'ToTreeItem',
-	inject: {
-		ToTree: { type: Object, default: null},
-		nodeMap: { type: Object, default: () => ({}) }
-	},
-	props: {
-		parent: {
-			type: String,
-			default: '__root__'
-		},
-		iconTop: {
-			type: [Number, String],
-			default: ''
-		},
-		// 展示数据
-		data: {
-			type: Array,
-			default: () => []
-		},
-		// 是否高亮当前选中节点，默认值是 false。
-		highlightCurrent: {
-			type: Boolean,
-			default: false
-		},
-		// 是否在点击节点的时候展开或者收缩节点， 默认值为 false，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
-		expandOnClickNode: {
-			type: Boolean,
-			default: false
-		},
-		// 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。
-		checkOnClickNode: {
-			type: Boolean,
-			default: false
-		},
-		// 节点是否可被选择
-		showCheckbox: {
-			type: Boolean,
-			default: false
-		},
-		// 父节点不被选择
-		isParentNotCheckbox: {
-			type: Boolean,
-			default: false
-		},
-		// 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
-		checkStrictly: {
-			type: Boolean,
-			default: false
-		},
-		// 当前选中的节点
-		currentNodeKey: {
-			type: [String, Number],
-			default: undefined
-		},
-		// 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 Function(value, data, node)
-		filterNodeMethod: {
-			type: Function,
-			default: undefined
-		},
-		// 展开子节点的时候是否自动展开父节点
-		autoExpandParent: {
-			type: Boolean,
-			default: true
-		},
-		// 指定子树为节点对象的某个属性值
-		childrenText: {
-			type: String,
-			default: 'children'
-		},
-		// 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
-		valueText: {
-			type: String,
-			default: 'value'
-		},
-		// 指定节点标签为节点对象的某个属性值
-		labelText: {
-			type: [String, Function],
-			default: 'label'
-		},
-		// 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效
-		isLeafText: {
-			type: [String, Function],
-			default: 'isLeaf'
-		},
-		// 指定节点是否禁用
-		disabledText: {
-			type: [String, Function],
-			default: 'disabled'
-		},
-		// 指定节点是否默认勾选
-		checkedText: {
-			type: [String, Function],
-			default: 'checked'
-		},
-		// 指定节点是否默认勾选
-		expandedText: {
-			type: [String, Function],
-			default: 'expanded'
-		}
-	},
-	data() {
-		return {
-			nodes: [],
-			isIn: false
-		};
-	},
-	computed: {
-		setIconStyle() {
-			let obj = {}
-			if (this.iconTop) {
-				obj.top = this.iconTop * 2 + 'em'
-			}
-			return obj
-		}
-	},
-	watch: {
-		data: {
-			handler() {
-				this.nodes = this.initNodes(JSON.parse(JSON.stringify(this.data)))
-			},
-			immediate: true,
-			deep: true
-		},
-		nodes: {
-			handler(nodes = []) {
-				this.$emit('update:data', nodes)
-			},
-			deep: true
-		}
-	},
-	methods: {
-		setCheckBoxStatus(node) {
-			// 所有节点都有选择
-			if (!this.isParentNotCheckbox && this.showCheckbox) {
-				if (node.hideCheckbox) {
-					return false
-				} else {
-					return true
-				}
-			// 父节点无选择，子节点有选择
-			} else if (this.isParentNotCheckbox && this.showCheckbox) {
-				if (node.children && node.children.length > 0 && !node.isLeaf) {
-					return false
-				} else {
-					return true
-				}
-			} else {
-				return false
-			}
-		},
-		initNodes(data) {
-			if (data && Array.isArray(data)) {
-				return data.map(node => {
-					node.value = node[this.valueText] || this.getUUID();
-					node.parent = this.parent;
-					node.label = this.execFunctionProperty(node[this.labelText], node) || '';
-					node.children = this.initNodes(node[this.childrenText]);
-					node.isLeaf = this.execFunctionProperty(node[this.isLeafText], node) || !node.children
-					node.disabled = this.execFunctionProperty(node[this.disabledText], node) || false;
-					node.checked = this.execFunctionProperty(node[this.checkedText], node) || false;
-					node.expanded = this.execFunctionProperty(node[this.expandedText], node) || false;
-					node.show = this.filter(node);
-					node._loading = false
-					this.nodeMap[node.value] = node;
-					return node;
-				});
-			}
-		},
-		filter(node) {
-			if (typeof this.filterNodeMethod === 'function') {
-				return this.filterNodeMethod(node);
-			} else {
-				return true;
-			}
-		},
-		execFunctionProperty(func, ...args) {
-			if (typeof func === 'function') {
-				return func(...args);
-			} else {
-				return func;
-			}
-		},
-		// 更新map中的node节点数据
-		updateNodemap(node) {
-			this.nodeMap[node.value] = node;
-		},
-		// 递归事件传递 请勿做任何业务处理
-		// 当前选中节点改变
-		handleCurrentNodeKeyChange(currentNodeKey) {
-			this.$emit('current-change', currentNodeKey);
-		},
-		// 当前节点check改变
-		handleCheckChange(node, checked) {
-			this.$emit('check', node, checked);
-		},
-		// 当前节点被点击 node-click
-		handleNodeClick(node) {
-			this.$emit('node-click', node);
-		},
-		// 当前节点expand
-		handleNodeExpand(node) {
-			this.$emit('node-expand', node);
-		},
-		// 当前节点collapse
-		handleNodeCollapse(node) {
-			this.$emit('node-collapse', node);
-		},
-		handleExpand(node) {
-			if (node.disabled) return;
-			if (node.isLeaf) return;
-			const expanded = node.expanded;
-			this.$set(node, 'expanded', !expanded);
-			this.updateNodemap(node);
-			if (!expanded) this.handleNodeExpand(node);
-			else this.handleNodeCollapse(node);
-		},
-		handleChilrenCheck(node, checked) {
-			const refs = this.$refs[`${node.value}_children`] || [];
-			const childrenRef = refs[0];
-			if (childrenRef) {
-				childrenRef.nodes.map(node => {
-					childrenRef.handleCheck(node, checked);
-				});
-			}
-		},
-		handleCheck(node, checked = false, isActive = false) {
-			if (node.disabled) return;
-			this.$set(node, 'checked', checked);
-			if (!this.checkStrictly) {
-				this.handleChilrenCheck(node, checked);
-			}
-			// 主动触发check时 提交check事件
-			this.updateNodemap(node);
-			// 判断父节点是不是全部勾选了
-			if (!this.checkStrictly) {
-				if (node.parent) {
-					const parentNode = this.nodeMap[node.parent];
-					if (parentNode) {
-						if (parentNode.children && parentNode.children.every(tnode => this.nodeMap[tnode.value] && this.nodeMap[tnode.value].checked)) {
-							parentNode.checked = true;
-						} else {
-							parentNode.checked = false;
-						}
-					}
-				}
-			}
-			this.$forceUpdate();
-			if (isActive) {
-				this.handleCheckChange(node, checked);
-			}
-		},
-		handleNodeEnter(node, nodeIndex) {
-			if (!(node.children && node.children.length)) return
-			if (this.ToTree.type === 'icon') {
-				setTimeout(() => {
-					const layerEl = this.$refs[`${node.value}_children`] ? this.$refs[`${node.value}_children`][0].$el : null
-					const layerRect = layerEl.getBoundingClientRect()
-					const nodeEl = this.$refs.node[nodeIndex]
-					const nodeRect = nodeEl.getBoundingClientRect()
-					const bottomSpace = document.body.offsetHeight - nodeRect.top - nodeRect.height
-					const topSpace = nodeRect.top + nodeRect.height
-
-					if (layerEl) {
-
-						// 计算左侧位置
-						layerEl.style.left = nodeRect.width + nodeRect.left + 'px'
-
-						// 计算顶部位置
-						// 如果底部空间足够，从下显示
-						if (layerRect.height <= bottomSpace) {
-							layerEl.style.top = nodeRect.top + 'px'
-							layerEl.style.bottom = 'auto'
-						}
-
-						// 如果底部空间不够，看顶部空间是否足够，如果足够则从上显示
-						else if (layerRect.height <= topSpace) {
-							layerEl.style.bottom = bottomSpace + 'px'
-							layerEl.style.top = 'auto'
-						}
-
-						// 如果两者都不够，则看哪边空间更大，往大的方向显示
-						else {
-							if (bottomSpace >= topSpace) {
-								layerEl.style.top = nodeRect.top + 'px'
-								layerEl.style.bottom = 0
-							} else {
-								layerEl.style.bottom = bottomSpace + 'px'
-								layerEl.style.top = 0
-							}
-						}
-					}
-					node.expanded = true
-				}, node.parent === '__root__' ? 0 : 200)
-			}
-		},
-		handleNodeLeave(node) {
-			if (this.ToTree.type === 'icon') {
-				setTimeout(() => {
-					if (!this.isIn) {
-						node.expanded = false
-						this.resetLayer(node)
-					}
-				}, node.parent === '__root__' ? 0 : 200);
-			}
-		},
-		handleLayerEnter(node) {
-			if (this.ToTree.type === 'icon') {
-				this.isIn = true
-			}
-		},
-		handleLayerLeave(node) {
-			if (this.ToTree.type === 'icon') {
-				this.isIn = false
-				node.expanded = false
-				this.resetLayer(node)
-			}
-		},
-		resetLayer(node) {
-			const layerEl = this.$refs[`${node.value}_children`] ? this.$refs[`${node.value}_children`][0].$el : null
-			if (layerEl) {
-				if (layerEl.style.left) layerEl.style.left = ''
-				if (layerEl.style.top) layerEl.style.top = ''
-				if (layerEl.style.bottom) layerEl.style.bottom = ''
-			}
-		},
-		handleLabelClick(event, node) {
-			if (node.disabled) return;
-			if (!this.checkOnClickNode && this.expandOnClickNode && this.ToTree.type !== 'icon') {
-				this.handleExpand(node);
-			}
-			if (this.ToTree.type === 'icon' && !(event.metaKey || event.ctrlKey)) {
-				this.ToTree.setCollapsedKeys()
-			}
-			this.checkOnClickNode && this.handleCheck(node, !node.checked, true);
-			if (this.highlightCurrent && (!this.expandOnClickNode || node.isLeaf)) {
-				this.handleCurrentNodeKeyChange(node.value)
-			}
-			this.handleNodeClick(node);
-		},
-		// 获取uuid
-		getUUID() {
-			return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-				var r = (Math.random() * 16) | 0;
-				var v = c === 'x' ? r : (r & 0x3) | 0x8;
-				return v.toString(16);
-			});
-		},
-		// 深度克隆
-		deepClone(obj = {}) {
-			const objClone = Array.isArray(obj) ? [] : {};
-			if (obj && typeof obj === 'object') {
-				// eslint-disable-next-line no-unused-vars
-				for (const key in obj) {
-					// eslint-disable-next-line no-prototype-builtins
-					if (obj.hasOwnProperty(key)) {
-						// 判断ojb子元素是否为对象，如果是，递归复制
-						if (obj[key] && typeof obj[key] === 'object') {
-							objClone[key] = this.deepClone(obj[key]);
-						} else {
-							// 如果不是，简单复制
-							objClone[key] = obj[key];
-						}
-					}
-				}
-			}
-			return objClone;
-		}
-	}
-};
-</script>
+<template>
+	<ul v-if="nodes" @mouseenter="$emit('mouseenter')" @mouseleave="$emit('mouseleave')">
+		<template v-for="(node, nodeIndex) in nodes">
+			<li
+				v-if="node.show"
+				:key="nodeIndex"
+				:ref="node.value"
+				:class="{
+					disabled: node.disabled,
+					unfold: node.expanded && !node.isLeaf,
+					fold: !node.expanded && !node.isLeaf,
+					leaf: !node.children || node.isLeaf,
+					loading:node._loading,
+					on: highlightCurrent && node.value === currentNodeKey
+				}"
+				>
+				<div ref="node" v-tip.fg.right="!(node.children && node.children.length) && node.parent === '__root__' && ToTree.type === 'icon' ? node.label:''" class="content" @mouseenter="handleNodeEnter(node,nodeIndex)" @mouseleave="handleNodeLeave(node)">
+					<div class="ico" :style="setIconStyle" @click.stop="handleExpand(node)"><span></span></div>
+
+					<!--子节点展示选择框，父节点不展示-->
+					<div v-if="setCheckBoxStatus(node)" class="check"><to-checkbox v-model="node.checked" v-dis="node.disabled" padding="0.5" @change="handleCheck(node, $event, true)"></to-checkbox></div>
+					<div class="text" @click.stop="event => handleLabelClick(event,node)">
+						<slot :node="node">
+							<div class="to-tree-text-group">
+								<to-icon v-if="node.icon" class="to-tree-text-icon" mode="none" :value="node.icon"></to-icon>
+								<span class="to-tree-text-content">{{ node.label }}</span>
+							</div>
+						</slot>
+					</div>
+				</div>
+				<template v-if="node.children && node.children.length > 0 && !node.isLeaf">
+					<to-tree-item
+						:ref="`${node.value}_children`"
+						:parent="node.value"
+						:data="node.children"
+						:highlight-current="highlightCurrent"
+						:expand-on-click-node="expandOnClickNode"
+						:check-on-click-node="checkOnClickNode"
+						:show-checkbox="showCheckbox"
+						:is-parent-not-checkbox="isParentNotCheckbox"
+						:children-text="childrenText"
+						:value-text="valueText"
+						:label-text="labelText"
+						:icon-top="iconTop"
+						:disabled-text="disabledText"
+						:is-leaf-text="isLeafText"
+						:checked-text="checkedText"
+						:expanded-text="expandedText"
+						:check-strictly="checkStrictly"
+						:current-node-key="currentNodeKey"
+						:filter-node-method="filterNodeMethod"
+						:auto-expand-parent="autoExpandParent"
+						@mouseenter="handleLayerEnter(node)"
+						@mouseleave="handleLayerLeave(node)"
+						@current-change="handleCurrentNodeKeyChange"
+						@check="handleCheckChange"
+						@node-click="handleNodeClick"
+						@node-expand="handleNodeExpand"
+						@node-collapse="handleNodeCollapse"
+						>
+						<template v-slot="scope">
+							<slot :node="scope.node"></slot>
+						</template>
+					</to-tree-item>
+				</template>
+			</li>
+		</template>
+	</ul>
+</template>
+
+<script>
+export default {
+	name: 'ToTreeItem',
+	componentName: 'ToTreeItem',
+	inject: {
+		ToTree: { type: Object, default: null},
+		nodeMap: { type: Object, default: () => ({}) }
+	},
+	props: {
+		parent: {
+			type: String,
+			default: '__root__'
+		},
+		iconTop: {
+			type: [Number, String],
+			default: ''
+		},
+		// 展示数据
+		data: {
+			type: Array,
+			default: () => []
+		},
+		// 是否高亮当前选中节点，默认值是 false。
+		highlightCurrent: {
+			type: Boolean,
+			default: false
+		},
+		// 是否在点击节点的时候展开或者收缩节点， 默认值为 false，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
+		expandOnClickNode: {
+			type: Boolean,
+			default: false
+		},
+		// 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。
+		checkOnClickNode: {
+			type: Boolean,
+			default: false
+		},
+		// 节点是否可被选择
+		showCheckbox: {
+			type: Boolean,
+			default: false
+		},
+		// 父节点不被选择
+		isParentNotCheckbox: {
+			type: Boolean,
+			default: false
+		},
+		// 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
+		checkStrictly: {
+			type: Boolean,
+			default: false
+		},
+		// 当前选中的节点
+		currentNodeKey: {
+			type: [String, Number],
+			default: undefined
+		},
+		// 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 Function(value, data, node)
+		filterNodeMethod: {
+			type: Function,
+			default: undefined
+		},
+		// 展开子节点的时候是否自动展开父节点
+		autoExpandParent: {
+			type: Boolean,
+			default: true
+		},
+		// 指定子树为节点对象的某个属性值
+		childrenText: {
+			type: String,
+			default: 'children'
+		},
+		// 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
+		valueText: {
+			type: String,
+			default: 'value'
+		},
+		// 指定节点标签为节点对象的某个属性值
+		labelText: {
+			type: [String, Function],
+			default: 'label'
+		},
+		// 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效
+		isLeafText: {
+			type: [String, Function],
+			default: 'isLeaf'
+		},
+		// 指定节点是否禁用
+		disabledText: {
+			type: [String, Function],
+			default: 'disabled'
+		},
+		// 指定节点是否默认勾选
+		checkedText: {
+			type: [String, Function],
+			default: 'checked'
+		},
+		// 指定节点是否默认勾选
+		expandedText: {
+			type: [String, Function],
+			default: 'expanded'
+		}
+	},
+	data() {
+		return {
+			nodes: [],
+			isIn: false
+		};
+	},
+	computed: {
+		setIconStyle() {
+			let obj = {}
+			if (this.iconTop) {
+				obj.top = this.iconTop * 2 + 'em'
+			}
+			return obj
+		}
+	},
+	watch: {
+		data: {
+			handler() {
+				this.nodes = this.initNodes(JSON.parse(JSON.stringify(this.data)))
+			},
+			immediate: true,
+			deep: true
+		},
+		nodes: {
+			handler(nodes = []) {
+				this.$emit('update:data', nodes)
+			},
+			deep: true
+		}
+	},
+	methods: {
+		setCheckBoxStatus(node) {
+			// 所有节点都有选择
+			if (!this.isParentNotCheckbox && this.showCheckbox) {
+				if (node.hideCheckbox) {
+					return false
+				} else {
+					return true
+				}
+			// 父节点无选择，子节点有选择
+			} else if (this.isParentNotCheckbox && this.showCheckbox) {
+				if (node.children && node.children.length > 0 && !node.isLeaf) {
+					return false
+				} else {
+					return true
+				}
+			} else {
+				return false
+			}
+		},
+		initNodes(data) {
+			if (data && Array.isArray(data)) {
+				return data.map(node => {
+					node.value = node[this.valueText] || this.getUUID();
+					node.parent = this.parent;
+					node.label = this.execFunctionProperty(node[this.labelText], node) || '';
+					node.children = this.initNodes(node[this.childrenText]);
+					node.isLeaf = this.execFunctionProperty(node[this.isLeafText], node) || !node.children
+					node.disabled = this.execFunctionProperty(node[this.disabledText], node) || false;
+					node.checked = this.execFunctionProperty(node[this.checkedText], node) || false;
+					node.expanded = this.execFunctionProperty(node[this.expandedText], node) || false;
+					node.show = this.filter(node);
+					node._loading = false
+					this.nodeMap[node.value] = node;
+					return node;
+				});
+			}
+		},
+		filter(node) {
+			if (typeof this.filterNodeMethod === 'function') {
+				return this.filterNodeMethod(node);
+			} else {
+				return true;
+			}
+		},
+		execFunctionProperty(func, ...args) {
+			if (typeof func === 'function') {
+				return func(...args);
+			} else {
+				return func;
+			}
+		},
+		// 更新map中的node节点数据
+		updateNodemap(node) {
+			this.nodeMap[node.value] = node;
+		},
+		// 递归事件传递 请勿做任何业务处理
+		// 当前选中节点改变
+		handleCurrentNodeKeyChange(currentNodeKey) {
+			this.$emit('current-change', currentNodeKey);
+		},
+		// 当前节点check改变
+		handleCheckChange(node, checked) {
+			this.$emit('check', node, checked);
+		},
+		// 当前节点被点击 node-click
+		handleNodeClick(node) {
+			this.$emit('node-click', node);
+		},
+		// 当前节点expand
+		handleNodeExpand(node) {
+			this.$emit('node-expand', node);
+		},
+		// 当前节点collapse
+		handleNodeCollapse(node) {
+			this.$emit('node-collapse', node);
+		},
+		handleExpand(node) {
+			if (node.disabled) return;
+			if (node.isLeaf) return;
+			const expanded = node.expanded;
+			this.$set(node, 'expanded', !expanded);
+			this.updateNodemap(node);
+			if (!expanded) this.handleNodeExpand(node);
+			else this.handleNodeCollapse(node);
+		},
+		handleChilrenCheck(node, checked) {
+			const refs = this.$refs[`${node.value}_children`] || [];
+			const childrenRef = refs[0];
+			if (childrenRef) {
+				childrenRef.nodes.map(node => {
+					childrenRef.handleCheck(node, checked);
+				});
+			}
+		},
+		handleCheck(node, checked = false, isActive = false) {
+			if (node.disabled) return;
+			this.$set(node, 'checked', checked);
+			if (!this.checkStrictly) {
+				this.handleChilrenCheck(node, checked);
+			}
+			// 主动触发check时 提交check事件
+			this.updateNodemap(node);
+			// 判断父节点是不是全部勾选了
+			if (!this.checkStrictly) {
+				if (node.parent) {
+					const parentNode = this.nodeMap[node.parent];
+					if (parentNode) {
+						if (parentNode.children && parentNode.children.every(tnode => this.nodeMap[tnode.value] && this.nodeMap[tnode.value].checked)) {
+							parentNode.checked = true;
+						} else {
+							parentNode.checked = false;
+						}
+					}
+				}
+			}
+			this.$forceUpdate();
+			if (isActive) {
+				this.handleCheckChange(node, checked);
+			}
+		},
+		handleNodeEnter(node, nodeIndex) {
+			if (!(node.children && node.children.length)) return
+			if (this.ToTree.type === 'icon') {
+				setTimeout(() => {
+					const layerEl = this.$refs[`${node.value}_children`] ? this.$refs[`${node.value}_children`][0].$el : null
+					const layerRect = layerEl.getBoundingClientRect()
+					const nodeEl = this.$refs.node[nodeIndex]
+					const nodeRect = nodeEl.getBoundingClientRect()
+					const bottomSpace = document.body.offsetHeight - nodeRect.top - nodeRect.height
+					const topSpace = nodeRect.top + nodeRect.height
+
+					if (layerEl) {
+
+						// 计算左侧位置
+						layerEl.style.left = nodeRect.width + nodeRect.left + 'px'
+
+						// 计算顶部位置
+						// 如果底部空间足够，从下显示
+						if (layerRect.height <= bottomSpace) {
+							layerEl.style.top = nodeRect.top + 'px'
+							layerEl.style.bottom = 'auto'
+						}
+
+						// 如果底部空间不够，看顶部空间是否足够，如果足够则从上显示
+						else if (layerRect.height <= topSpace) {
+							layerEl.style.bottom = bottomSpace + 'px'
+							layerEl.style.top = 'auto'
+						}
+
+						// 如果两者都不够，则看哪边空间更大，往大的方向显示
+						else {
+							if (bottomSpace >= topSpace) {
+								layerEl.style.top = nodeRect.top + 'px'
+								layerEl.style.bottom = 0
+							} else {
+								layerEl.style.bottom = bottomSpace + 'px'
+								layerEl.style.top = 0
+							}
+						}
+					}
+					node.expanded = true
+				}, node.parent === '__root__' ? 0 : 200)
+			}
+		},
+		handleNodeLeave(node) {
+			if (this.ToTree.type === 'icon') {
+				setTimeout(() => {
+					if (!this.isIn) {
+						node.expanded = false
+						this.resetLayer(node)
+					}
+				}, node.parent === '__root__' ? 0 : 200);
+			}
+		},
+		handleLayerEnter(node) {
+			if (this.ToTree.type === 'icon') {
+				this.isIn = true
+			}
+		},
+		handleLayerLeave(node) {
+			if (this.ToTree.type === 'icon') {
+				this.isIn = false
+				node.expanded = false
+				this.resetLayer(node)
+			}
+		},
+		resetLayer(node) {
+			const layerEl = this.$refs[`${node.value}_children`] ? this.$refs[`${node.value}_children`][0].$el : null
+			if (layerEl) {
+				if (layerEl.style.left) layerEl.style.left = ''
+				if (layerEl.style.top) layerEl.style.top = ''
+				if (layerEl.style.bottom) layerEl.style.bottom = ''
+			}
+		},
+		handleLabelClick(event, node) {
+			if (node.disabled) return;
+			if (!this.checkOnClickNode && this.expandOnClickNode && this.ToTree.type !== 'icon') {
+				this.handleExpand(node);
+			}
+			if (this.ToTree.type === 'icon' && !(event.metaKey || event.ctrlKey)) {
+				this.ToTree.setCollapsedKeys()
+			}
+			this.checkOnClickNode && this.handleCheck(node, !node.checked, true);
+			if (this.highlightCurrent && (!this.expandOnClickNode || node.isLeaf)) {
+				this.handleCurrentNodeKeyChange(node.value)
+			}
+			this.handleNodeClick(node);
+		},
+		// 获取uuid
+		getUUID() {
+			return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+				var r = (Math.random() * 16) | 0;
+				var v = c === 'x' ? r : (r & 0x3) | 0x8;
+				return v.toString(16);
+			});
+		},
+		// 深度克隆
+		deepClone(obj = {}) {
+			const objClone = Array.isArray(obj) ? [] : {};
+			if (obj && typeof obj === 'object') {
+				// eslint-disable-next-line no-unused-vars
+				for (const key in obj) {
+					// eslint-disable-next-line no-prototype-builtins
+					if (obj.hasOwnProperty(key)) {
+						// 判断ojb子元素是否为对象，如果是，递归复制
+						if (obj[key] && typeof obj[key] === 'object') {
+							objClone[key] = this.deepClone(obj[key]);
+						} else {
+							// 如果不是，简单复制
+							objClone[key] = obj[key];
+						}
+					}
+				}
+			}
+			return objClone;
+		}
+	}
+};
+</script>