是什么?
官方 demo
常用参数解析GridLayout
参数含义数据类型colNum将一行分为多少块数字 默认 12
rowHeight行高数字 默认是单位是 px
isDraggable是否可以拖拽boolean
isResizable是否可以改变大小boolean
responsive是否是响应式的booleanGridItem
参数含义类型iid类型不限
x第几列数字
y第几行数字
w占几块数字
h高度 ,最后算出的元素高度是 h*rowHeight数字
主要代码
定义一个默认的布局var testLayout = [
{x: 0,y: 0,w: 6,h: 5,i: "0",component: "test1"},//0列0行 宽为5块,高为5*rowHeight
{x: 6, y: 0, w: 6, h: 5, i: "1", component: "test2" },// 列为6(因为上一块的宽度是6)
{x: 0,y: 5,w: 12,h: 10,i: "2",component: "test3"},//自己算一算吧
{x: 0,y: 15,w: 12,h: 10,i: "3",component: "test4"}
];
生成布局// 最外大的grid,绑定了testLayout的值,这样testLayout 会随着用户的拖拽放大缩小改变
// 可以参考官方的实例
:layout.sync="testLayout"
:col-n