CocoClassHelpDocs/components/Edit/Node.vue

<script setup lang="ts">
import { toRefs } from "vue";
import type Node from "element-plus/es/components/tree/src/model/node";
import {
  Delete,
  Plus,
} from "@element-plus/icons-vue";
import _ from "lodash";
import type { TreeData } from "./Tree";

const props = defineProps<{
  node: Node;
  data: TreeData;
}>();
const emit = defineEmits(["append", "remove"]);
const { node, data } = toRefs(props);
</script>
<template>
  <div class="node">
    <el-tooltip :content="node.label" :show-after="500">
      <span class="label">{{ node.label }}</span>
    </el-tooltip>
    <el-button-group>
      <el-button
        v-if="data.isDir"
        type="primary"
        link
        @click.stop="() => emit('append')"
        :icon="Plus"
      >
      </el-button>
      <el-button
        type="danger"
        link
        @click.stop="() => emit('remove')"
        :icon="Delete"
      >
      </el-button>
    </el-button-group>
  </div>
</template>

<style lang="scss" scoped>
.node {
  flex: 1;
  display: flex;
  overflow: hidden;
  .label {
    text-overflow: ellipsis;
    overflow: hidden;
    flex: 1;
  }
}
</style>