封装一个思维导图组件
最近封装了一个简单的思维导图组件，在此简单记录一下心里历程
组件样式
组件结构设计
节点之间的线分成三部分，分别是竖线左边的横线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>
所以设计、封装一个组件大致可以分为以下几步：
- 需求分析
- 组件结构设计
- 组件数据结构设计
然后组件的入参、出参、事件、方法、插槽等等结合实际业务，也就水到渠成了