基于低代码卡片布局设计与实现

业务场景

用于卡片/卡片列表的展示

实现逻辑

基于网格(Grid)布局实现卡片内容排版

组件功能拆分

卡片列表(cardList)

属性如下:

1. 排列方式
   • 竖排
   • 横排
2. 列数
   • 不限

卡片

卡片按钮

卡片支持添加按钮配置

渲染器设计

卡片列表（WinCardList）

• 提供列表末尾插槽用于存放按钮增/删组件

卡片

点击添加commonStyle:{

}

• 行属性
  • 列数(动态删减)下拉选择
  • 添加行功能( 向上添加、向下添加)

图片

• 支持设置长宽

遇到的问题

无法点击列(col)

• 在实现的过程中发现，当我们在栅格中拖入组件，如图片，就会出现无法点击col的情况，但是我们需要col去自适应内容，就必须为col设置flex:0 0 auto;width:auto。基于次前提，翻阅资料，借鉴相关平台处理方案，决定在卡片中引入大纲树，后续将使用到整个项目。