一、创作来源
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
创作不易,需源码请联系作者!