本周的任务是开发一款思维导图应用，重点完成了上边栏的绘制和整体框架搭建，使用了Element UI库。上边栏暂用Vue图标代替logo，右侧设置思维导图标题和功能下拉菜单，功能栏已封装为Vue组件，采用父子组件通信。画布部分采用el-container分隔，使用el-scrollbar优化滚动体验。未来计划扩展画布的可调整性。由于技术问题，工具栏的iconfont暂未引入。
首先进行效果展示
整体结构是：上边栏，左右工具栏，和中间的画布。
本周的总体任务是完成上边栏的绘制和整体框架的实现，以及中间画布各种事件的注册以及实验。
上边栏的制作
左边的组件设定为logo，不过由于目前没有设计，所以暂时先拿vue的图标来替代
右边分为两层
上边是思维导图标题，设想可以很轻易的直接修改
下边是功能栏，均为下拉菜单，因为功能较为独立，且代码较长，我将其封装成一个单独的vue component。之后的各种事件设计为父子组件之间的通信。下拉菜单的各项功能还未进行填充，所以进行了留白。
工具栏由于iconfont网站暂时无法进入而暂时进行了一些搁置。
中间整体部分的设计
使用element中的el-container将中间部分分为三部分。并计划在之后进行一些拓展（拉住一段的边框而进行拓展）
暂时将两个aside的宽度设为一致。
中间的部分是一个canvas，是我们的画布，也是该软件设计的灵魂。
由于el-main对超出部分的滑动条展示不是很美观。使用el-scrollbar进行美观。同时隐藏它自带的滑动条。前后效果展示
在这里插入图片描述
扫一扫
1948
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
