1.在每个节点显示对应的操作,eg:编辑、上下移动、添加删除,利用的dom元素的定位方法
2.,如上为效果图,每个节点后有对应若干操作
<template>
<div class="container">
<PageHeader title="空间配置" />
<div class="container-box">
<div class="container-box-itemBox" @mouseleave="itemHidden">
<div class="container-box-top">
<span>空间结构:</span>
<span v-show="ifCreateNewBuilding" @click.stop="createNewBuilding"
>+新建楼宇</span
>
</div>
<div v-show="!ifCreateNewBuilding" class="createTree">
<a-tree
v-model:selectedKeys="selectedKeys"
:tree-data="treeData.dataNode"
show-line
right-click="clickRightClick"
:default-expand-all="true"
@select="onSelect"
>
<template #title="{ title, key: treeKey, children }">
<div @click="enter(treeKey, children)">
<span
:ref="
(el) => {
curSpan[treeKey] = el;
}
"
>{
{ title }}</span
>
</div>
</template>
</a-tree>
</div>
<div
:style="{
position: 'absolute',
left: currentX + 'px',
top: currentY + 'px',
}"
>
<a-space v-show="ifShowItem">
<img
v-for="item in imgItems.backShowItems"
:src="item.src"
alt=""
:style="{ width: ' 1vw', cursor: 'pointer' }"
@click.stop="itemOptions(item.imgName)"
/>
</a-space>
<CurModal
:if-visible="ifVisible"
@reviceIfShow="reviceIfShow"
@handleOk="handleOk"
/>
</div>
</div>
<div class="container-bottom">
<a-button type="primary" @click.stop="onSave"> 保存 </a-button>
<a-button @click.stop="onCancel"> 取消 </a-button>
</div>
</div>
</div>
</template>
<script>
import { ref, reactive, watch, toRefs, computed, onMounted } from "vue";
import _ from "lodash";
import CurModal from "./components/modal.vue";
export default {
components: {
CurModal,
},
setup() {
const ifCreateNewBuilding = ref(true);
const treeKey = reactive({
rootKey: "",
});
const createNewBuilding = () => {
ifCreateNewBuilding.va