Skip to content

VSteamLayout (栅格&流式)布局

流式布局

写法

由于是珊格系统每一行切分成24格。VStreamLayout组件的gap横向间距传入整数,upDown竖像间距传入整数,min-width让每一个StreamItem都有最小宽度, VStreamItem组件有珊格方法span传入整数最大为24,并且会根据当前窗口的大小进行自适应缩小对应各自宽度如果达到了min-width最小宽度伐值会固定在min-width 其他超出的格会自动下落

VStreamLayout 组件参数说明

参数说明类型
gap子项之间的间距大小,用于设置水平间距number(默认值:0)
minWidth子项的最小宽度,当计算宽度小于此值时使用最小宽度number(默认值:120)
upDown子项之间的垂直间距大小number(默认值:0)

插槽

插槽名说明
default默认插槽,用于放置需要流式布局的子组件

暴露的方法

方法名说明
recalculate手动触发重新计算布局

特色功能

  • 响应式布局 : 根据容器宽度自动调整子项排列
  • 最小宽度保证 : 确保子项不会小于设定的最小宽度
  • 自动换行 : 当一行无法容纳更多子项时自动换行
  • 间距控制 : 支持水平和垂直间距的精确控制
  • ResizeObserver : 监听容器尺寸变化,自动重新计算布局

使用说明

子组件需要设置 data-span 属性来指定占用的栅格数(基于24栅格系统),组件会根据这个值和容器宽度自动计算子项的实际宽度。