vue纯手写思维导图，拒绝插件(cv即用)

已完成功能点：折叠、放大、缩小、移动
后续增加功能点：添加、删除

先看结果：

有这么个需求，按照层级关系，把表格放在思维导图上，我第一时间想到用插件，但是找了好久都没有找到比较合适的插件，决定自己手写一个。

第一步：

理论猜想

模拟一个带有层级关系的数据格式，并且可以在vue组件中需要做成组件递归形势，左侧父级永远包含右侧子集。左侧A盒子，右侧F盒子用flex布局B/C/D竖着排列，右侧3个div分别用伪元素分别做3根横线，F盒子设置border-left 竖线，这样一拼接就感觉像是一个思维导图了，理论先这样，但是还没有想到B盒子的左侧横线和F盒子竖线交叉之后，上面圆圈多余的部分怎么去除。先动手再说，碰到问题再想着怎么处理问题。

第二步：

动手实践

模拟数据： 设置listCache 模拟数据 带有层级关系的格式，id是唯一的，这样做为了后期可能操作表格的时候方便找到唯一的表格。
递归组件： mindItem.vue里面的name属性名称设置 mindItem，然后再mindItem.vue组件里面再次引入即可递归
多余线段去除： 刚开始的做法是直接设置子集的border-left，这样的问题会造成有线段空出来，显得很多余，转换一个思路。

• 设置B和A的连接：请看图2 把第一个div的伪元素::after设置border-left: solid 2px blue;height: 50%;bottom: 0; 这样做是让线段1向下展示，高度只有B盒子的一半，这样就感觉像线段拐弯了，从A连接到B的样式，其实是多个线段拼接起来而已。
• 设置D和A的连接：请看图2 把第最后一个div的伪元素::after设置border-left: solid 2px #000; height: 50%; top: 0; 这样做是让线段3向上展示，高度只有C盒子的一半，这样就感觉像线段拐弯了，从A连接到C的样式，其实是多个线段拼接起来而已。
• 设置C和A的连接：请看图2 把中间div的伪元素::after设置border-left: solid 2px yellowgreen; height: 100%; 处在中间地段的div盒子不必考虑线段拐弯问题，高度100%就行了和上下的盒子的线段连接起来就好了

图2：

src/views/mind/components/mindItem.vue

src/views/mind/mind.vue

src/views/mind/components/index.js

export function expendfn({list = [],id = '',isExpend = false // 默认展开/关闭
}) {if (list.length === 0) return [];let arr = JSON.parse(JSON.stringify(list));id === '' && !isExpend && defaultfn(arr, id, isExpend); // 刷新// 刷新function defaultfn(lists) {lists.forEach((x) => {x.isExpandBefore = false;x.isExpandAfter = falseif (x.children) defaultfn(x.children);});}return arr;
}

src/router/index.js

import Vue from 'vue'
Vue.use(VueRouter)
const routes = [{path: '/mind',naem: 'mind',component: () => import('@/views/mind/mind.vue')
}, ]const router = new VueRouter({routes
})export default router

src/main.js

import '@/directive/index.js'
import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue'
import ElementUI from 'element-ui';
import Vue from 'vue'
import jm from 'vue-jsmind'
import router from './router'
import store from './store'Vue.config.productionTip = false
Vue.use(ElementUI);Vue.use(jm)
if (window.jsMind) {console.log('wind')Vue.prototype.jsMind = window.jsMind
}
new Vue({router,store,render: h => h(App)
}).$mount('#app')