vue-grid-layout+component 实现动态布局，CSS的标准文档流

生成布局

// 最外大的grid，绑定了testLayout的值，这样testLayout 会随着用户的拖拽放大缩小改变

// 可以参考官方的实例

<grid-layout

:layout.sync=“testLayout”

:col-num=“12”

:row-height=“55”

:is-draggable=“draggable”

:is-resizable=“resizable”

:auto-size=“true”

:responsive=“responsive”

// 遍历testLayout生成item

<grid-item

v-for=“item in testLayout”

:x=“item.x”

:y=“item.y”

:w=“item.w”

:h=“item.h”

:i=“item.i”

:key=“item.key”

// 定义一个关闭按钮实现删除当前的

{ {item.title}}

// 这里使用component来显示组件。

css 样式

定义整个布局的背景颜色