首页 前端知识 vue-grid-layout component 实现动态布局,CSS的标准文档流

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

2024-05-30 10:05:36 前端知识 前端哥 223 693 我要收藏
生成布局

// 最外大的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 样式

定义整个布局的背景颜色

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10076.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!