佈局

1. 九宮格佈局

在這裏插入圖片描述

可以通過float、定位佈局去實現,用戶可以根據自己需要去佈局,每個格子的默認寬高均爲1,,每個格子僅可以放置一個字段。

const GridInfo = {
  layout: [3, 3],//行列
  cells: [//單元格信息
    { w: 1, h: 3 },
    { w: 1, h: 1 },
    { w: 1, h: 1 },
    { w: 0, h: 1 },
    { w: 1, h: 1 },
    { w: 1, h: 1 },
    { w: 0, h: 1 },
    { w: 1, h: 1 },
    { w: 1, h: 1 }
  ]
}

難點:
1.單元格融合的計算問題。1)在屬性欄設置。2)其他操作實現
3.定位去實現,要通過z-index去實現融合

2. 平臺佈局

就是我們設計器裏的佈局,用戶可以使用容器在單元格里佈局

[外鏈圖片轉存失敗(img-W5N6G9BS-1567071694075)(file:///var/folders/2v/lht2kcwj2mz214gxztzcmpfm0000gn/T/cc0c9bd9e0fee937.png)]

問題:
1.佈局元數據可能會很大
2.表格這種形式單元格需要根據元數據取生成佈局

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章