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

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

  • 组件地址:
    https://github.com/hzsrc/slot...
  • 安装方式:
    npm i slot-layout
【基于vue的插槽式动态布局组件slot-layout】这个组件基于一个布局配置对象,通过调整布局配置对象,最终通过映射到对应的vue组件插槽,来动态进行页面布局,布局和配置比较方便。
特性
  • 通过js布局对象,完全控制页面布局。
  • 特别适合用于低代码平台系统,只需在运行时按照需要动态传入一个布局配置对象,即可随意调整页面布局。无需预先编写布局代码。
  • 支持多层布局嵌套,可实现任意数目、任意层次的布局。
  • 支持任意长度单位,如px、vw、%、rem。
  • 支持填充式布局。即区块填充满父容器。
  • 组件自带布局配置功能,可轻松实现布局设计。
    基于vue的插槽式动态布局组件slot-layout
    文章图片
用法举例如下: 1、简单例子(单层、两个子节点):
查看效果:https://codepen.io/hzsrc/pen/...
基于vue的插槽式动态布局组件slot-layout
文章图片


2、复杂的例子:
查看效果
基于vue的插槽式动态布局组件slot-layout
文章图片


    推荐阅读