简单聊一聊组件封装

封装一个思维导图组件

最近封装了一个简单的思维导图组件，在此简单记录一下心里历程

组件样式

组件结构设计

节点之间的线分成三部分，分别是竖线左边的横线A、竖线B、竖线右边的横线C，所以一个节点可以包含以下几个元素：

• 横线C，根节点不展示
• 节点内容，提供插槽以满足自定义节点内容的样式
• 收起、展开子节点的按钮，叶子节点不展示
• 横线A，叶子节点不展示
• 竖线B，叶子节点不展示

然后使用递归组件即可实现思维导图

数据结构

使用递归组件，所以使用树形数据结构。另外需要考虑数据结构的字段，在此不做多言

实现过程中遇到的难点和解决方案

• 计算竖线的高度和位置

竖线的高度 = 最后一个子节点中横线C的offsetTop + 最后一个子节点的offsetTop - 第一个子节点的横线C的offsetTop
竖线的top = 第一个子节点中横线C的offsetTop

• 递归组件中使用插槽

使用如下写法

<template slot-scope="{ nodeData }">
  <slot v-bind:nodeData="nodeData"></slot>
</template>

所以设计、封装一个组件大致可以分为以下几步：

• 需求分析
• 组件结构设计
• 组件数据结构设计

然后组件的入参、出参、事件、方法、插槽等等结合实际业务，也就水到渠成了