从零搭建树形组件：告别第三方，打造专属菜单体验

2023-03-02 09:55:08

手写树形组件：构建无限可能

前言

树形组件是前端开发中不可或缺的 UI 元素，广泛应用于文件管理器、组织架构和无限极菜单等场景。虽然现成的第三方组件提供了便利，但它们往往难以定制，性能受限，维护成本高昂。因此，越来越多的开发者选择亲手打造树形组件，以获得更高的灵活性和掌控力。本文将手把手教你使用 Vue3 和 TypeScript 从零构建一个简单的树形组件，并借助递归实现无限极菜单的展开功能。

第一步：构建组件结构

树形组件的核心在于其层级结构，因此我们需要定义组件的数据模型和结构。我们使用 Vue3 的 Composition API 管理组件状态，TypeScript 定义组件的类型和接口。

代码示例：

import { ref } from 'vue'

// 定义树形组件的根节点
const root = ref({
  id: 'root',
  name: 'Root Node',
  children: []
})

// 定义树形组件的子节点
const childNode = {
  id: 'child-1',
  name: 'Child Node 1',
  children: []
}

// 将子节点添加到根节点
root.value.children.push(childNode)

第二步：实现递归展开

要实现无限极菜单的展开，我们需要使用递归遍历树形组件的子节点。Vue3 的 v-for 指令可以实现递归，并在每个子节点中嵌套相同的树形组件。

代码示例：

<template>
  <ul>
    <li v-for="child in root.value.children" :key="child.id">
      {{ child.name }}
      <component :is="TreeComponent" :data="child" />
    </li>
  </ul>
</template>

第三步：添加交互功能

为了提升组件可用性，我们可以添加一些交互功能，例如节点展开/收起、节点选择和节点拖拽。

代码示例：

import { ref, onMounted } from 'vue'

// 定义节点是否展开的状态
const isExpanded = ref(false)

// 定义节点是否被选中的状态
const isSelected = ref(false)

// 在组件挂载时初始化节点状态
onMounted(() => {
  if (this.data.isExpanded) {
    isExpanded.value = true
  }
  if (this.data.isSelected) {
    isSelected.value = true
  }
})

第四步：自定义组件样式

最后，我们可以使用 CSS 定制组件样式，使其更符合应用风格。

代码示例：

.tree-component {
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.tree-component-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tree-component-node-name {
  flex: 1;
}

.tree-component-node-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}