antd树形空间的封装

最新推荐文章于 2023-12-26 14:41:50 发布

KyleZhou_

最新推荐文章于 2023-12-26 14:41:50 发布

阅读量112

点赞数

分类专栏： antd 文章标签： html servlet 前端

本文链接：https://blog.csdn.net/weixin_38949279/article/details/127009715

版权

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.value =