基于vue的插槽式动态布局组件slot-layout

因为经常需要做一些动态布局,做了个vue动态布局组件slot-layout,分享下。

这个组件基于一个布局配置对象,通过调整布局配置对象,最终通过映射到对应的vue组件插槽,来动态进行页面布局,布局和配置比较方便。

特性

  • 通过js布局对象,完全控制页面布局。
  • 特别适合用于低代码平台系统,只需在运行时按照需要动态传入一个布局配置对象,即可随意调整页面布局。无需预先编写布局代码。
  • 支持多层布局嵌套,可实现任意数目、任意层次的布局。
  • 支持任意长度单位,如px、vw、%、rem。
  • 支持填充式布局。即区块填充满父容器。
  • 组件自带布局配置功能,可轻松实现布局设计。
    基于vue的插槽式动态布局组件slot-layout_第1张图片

用法举例如下:

1、简单例子(单层、两个子节点):
查看效果:https://codepen.io/hzsrc/pen/...

基于vue的插槽式动态布局组件slot-layout_第2张图片


2、复杂的例子:
查看效果

基于vue的插槽式动态布局组件slot-layout_第3张图片



你可能感兴趣的