[update 90328] 拆分拖拽,优化拖拽性能

This commit is contained in:
danshihao
2024-09-26 12:17:54 +08:00
parent d25cb4f708
commit 1b7ee0ada7
2 changed files with 19 additions and 14 deletions
@@ -20,11 +20,9 @@
@dragstart="changeDraggingStatus(true)"
@dragend="changeDraggingStatus(false)"
@drop="onDrop">
<template #title="record">
<div class="tree-operate-node"
@mouseenter="handleTreeMouseover(record.id)"
@mouseleave="handleTreeMouseout(record.id)"
@click="handleSelectTreeNode(record)">
<!-- 拖拽期间插槽频繁触发执行导致卡顿拖拽期间只显示节点名 -->
<template #title="record" v-if="!dragging">
<div class="tree-operate-node" @click="handleSelectTreeNode(record)">
<a-icon class="parent-node-icon"
type="folder"
v-if="record.dataRef.children && record.dataRef.children.length > 0" />
@@ -36,8 +34,7 @@
<span class="tree-node-custom-title">{{ record.name }} {{ record.itemName }}</span>
</a-tooltip>
<span class="tree-node-custom-title" v-else>{{ record.name }} {{ record.itemName }}</span>
<div class="tree-operate-node-btn-box"
:class="{'tree-operate-node-btn-box-hide': record.id !== mouseInNodeKey}">
<div class="tree-operate-node-btn-box tree-operate-node-btn-box-hide" v-if="!dragging">
<!--新增-->
<a-button icon="plus"
class="tree-operate-node-btn"
@@ -74,6 +71,9 @@
</div>
</div>
</template>
<template v-else>
<span class="tree-node-custom-title">{{ record.name }} {{ record.itemName }}</span>
</template>
</a-tree>
</a-spin>
</div>
@@ -883,4 +883,9 @@ export default {
font-size: 16px;
margin-right: 10px;
}
// 鼠标滑动到节点,显示操作按钮
.tree-node-custom-title:hover + .tree-operate-node-btn-box-hide {
opacity: 1;
pointer-events: auto;
}
</style>