项目实训3：项目的细节填充

本周在上周的框架基础上，对界面的细节进行填充

1.实现左侧栏的拖拽功能

这个功能是通过鼠标事件进行实现的。由于对前端不是特别熟悉，我进行了多次尝试。
eg1:使用mousedown方法将flag置为true，mouseup方法将flag置为false，使用mousemove方法在flag===true的时候，对左侧栏的宽度进行调整。
但是这个方法会带来很大的延迟。方法的实现也不是非常优美。
eg2:在mousedown方法注册mousemove方法和mouseup方法。我觉得这样的实现比较合理。
第二种代码的简洁形式如下：
mousedown_aside(e){
console.log(“the method is mousedown_aside”)
let that=this
document.οnmοusemοve=function(e){
…
}
document.οnmοuseup=function(evt){
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
},

可以看到由于固定了左侧栏的宽度和滑动条的宽度，导致效果不如人意。通过将滑动条置为右侧浮动并为左侧栏添加20px的padding和滑动条添加-20px的margin解决了该问题

2.对左侧栏的细节实现

效果如下：

基本设想是分为上下两个部分：上面的搜索框和下面的图形列表
搜索框的部分比较好实现。
但是对于列表，我的初始设想是使用表格，但是使用之后感觉有些不太适配。后来了解到有折叠面板可以使用。使用了折叠面板并进行了一些基本尝试后，发现效果不错。

3.目前进度（截止3.21）

4.进度更新（截止3.22）

从今天开始对右侧栏进行构建
完成后整体效果
右侧的功能栏使用标签页作为主要架构。目前先进行这些填充。

5.进度更新（截止3.26）

通过结合使用el-icon和iconfont来制作上侧的图标工具栏
整体效果
el-icon的使用方式较为简单
iconfont的使用通过在网站下载代码后，将css路径导入main.js后，使用css的类名即可使用。