seecoder-devcloud-frontend/src/components/TreeNode.vue

<template>
  <div class="tree-node-container" ref="node">
    <div class="tree-node" @click="nodeClick(id)">
      <div class="node-state">{{state}}</div>
      <div class="node-title">{{title}}</div>
    </div>
    <div class="node-postfix">
      <div class="icon" target="delete" @click="deleteNode(id)"></div>
      <div class="icon" target="add" @click="addChild(id)"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    id: Number,
    state: String,
    title: String,
  },
  methods: {
    setTreeNodeOffsetX(x) {
      this.$refs.node.style.left = `${x}px`;
    },
    setTreeNodeOffsetY(y) {
      this.$refs.node.style.top = `${y}px`;
    },
    setTreeNodeOffset(x, y) {
      this.$refs.node.style.left = `${x}px`;
      this.$refs.node.style.top = `${y}px`;
    },
    getTreeNodeSize() {
      return {
        height: this.$refs.node.offsetHeight,
        width: this.$refs.node.offsetWidth,
      };
    },
    addChild(id) {
      this.$emit('add-child', id);
    },
    deleteNode(id) {
      this.$emit('delete-node', id);
    },
    nodeClick(id) {
      this.$emit('node-click', id);
    },
  },
};
</script>

<style lang="scss" scoped>
.tree-node-container {
  position: absolute;
  height: 140px;
  width: 20%;

  user-select: none;
  & .node-postfix {
    position: absolute;
    top: 120px;
    width: 100%;
    height: 20px;
    display: none;
  }

  &:hover .node-postfix {
    display: block;
  }
}
.tree-node {
  box-sizing: border-box;
  border-radius: 2px;
  border: 1px solid #3f3f3f;
  height: 120px;
  width: 100%;
}
.icon {
  width: 14px;
  height: 14px;
  float: right;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 4px;
  margin-right: 10px;
  transition: all .2s linear;
}
.icon:hover{
  cursor: pointer;
  transition-duration: 0.2s;
  transform: scale(1.1);
  transition-timing-function:ease-in-out;
}
.icon[target=add]{
  background-image: url("../assets/icon/add.svg");
}
.icon[target=delete]{
  background-image: url("../assets/icon/delete.svg");
}
</style>