自定义Vue的DockPanel-Layout

一、创作来源

1、在vue项目中需要有停靠、浮动、面板布局等需求，如arcgis的界面布局

2、在npm中搜索了关于vue的docklayout组件，搜索后就一个组件@imengyu/vue-dock-layout，截图如下，该组件没有停靠组件，没有浮动组件，不满足个人在项目中的需要

3、在查找过程中，发现ngx-flexlayout包，但是框架是Angular ，并不是vue的，也不满足需要

二、创作思路

1、Panel对象

敲定Panel对象以及属性，对象包括：

a、分割面板：DockSplitPanel，顶层面板，

b、停靠面板：DockPinPanel,左右停靠面板，中间面板，

c、分组面板：DockGroupPanel，两个面板合成一个显示，中间面板，

d、内容面板：DockContentPanel，底层面板，

e、浮动面板：DockFloatPanel，顶层面板，

2、通讯机制

采用provide/inject机制通信：

provide/inject：简单的来说就是在父组件中通过provide来提供变量，然后在子组件中通过inject来注入变量，需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provide中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

3、结构定义

采用树状结构定义

4、面板输送

        slot 插槽，是子组件提供给父组件使用的一个占位符，父组件可以在这个占位符中填充任何模板代码。主要作用就是更好的拓展和定制化组件，例如弹窗组件、表格组件等。分为默认插槽、具名插槽和作用域插槽。

        其中前两个都是渲染在父级，本质上就是替换，父组件渲染完毕之后替换对应的 slot；区别在于具名插槽就是给插槽取了名字；

        而作用域插槽在组件内部渲染。本质上会把父组件的内容渲染成函数，子组件调用函数，并且将数据传递给它。当需要将子组件的数据交给父组件展示，此时就可以使用作用域插槽。给数据一个新的作用域，因此叫做作用域插槽。 

实现效果

效果图：

效果视频：

dockpanel

创作不易，需源码请联系作者！