vue实现多栏布局（拖拽改变盒子的宽度和高度），任意区域最大化/最小化，并且实现类似vscode，一键折叠展开相应区域

项目中要实现分栏布局效果的需求，各区域的宽高可以随意改变（拖拽改变盒子的宽度和高度），并且每个区域可以实现最大化/最小化，并且底部实现类似vscode中的分栏图标按钮，点击随意折叠/展开每个区域。

 直接看效果

在CSDN中查找到，vue-split-pane组件，由于我有定制化的需求，就没有直接npm install vue-splitpane使用，而是重新写了一下。如果要了解vue-split-pane组件，源码链接：

GitHub - PanJiaChen/vue-split-pane: Split-Pane component built with vue2.0, can be split vertically or horizontally. http://panjiachen.github.io/split-pane/demo/index.html

demo的github地址：GitHub - MonkeyKingYY/vue-split-pane-demo

下面直接放代码：

APP.vue 

SplitPane.vue:

 Resizer.vue:

Pane.vue:

BottomTaskBar.vue:

注意⚠️：静态资源包括图标和图标就不上传了，如果需要运行代码，可以直接从github上clone下来运行即可。关于这种类似vscode的分栏布局，曾经是让我很头疼的需求，解决了之后很开心。如果能帮助大家解决自己的问题，我会更开心。最后再次感谢这个插件：GitHub - PanJiaChen/vue-split-pane: Split-Pane component built with vue2.0, can be split vertically or horizontally. http://panjiachen.github.io/split-pane/demo/index.html

 如果帮助到您了，可以留下一个赞告诉我