vue动态设置文字布局方式_vue-grid-layout+component 实现动态布局__Vue.js

是什么？

官方 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