Skip to content
Grid Layout Plus
Search
K
Main Navigation
指南
示例
中文
English
中文
English
切换深色模式
Grid Layout Plus
适用于 Vue 3 的可拖拽、可缩放栅格布局组件
一个组件就能支持拖拽、缩放和响应式布局,并提供碰撞处理与定位策略。
开始使用
浏览示例
GitHub
你想先做什么?
01 / 指南
搭一个布局
安装组件并绑定
v-model:layout
,就能渲染可拖拽、可缩放的栅格布局。
阅读指南
→
02 / 示例
找一个相近的示例
示例按功能分类,每个页面都提供可以直接复制的最简示例。
浏览示例
→
03 / API
查属性和事件
查询组件属性、默认值、类型和事件。
打开 API 参考
→
控制栅格的交互方式
布局数据保存在应用状态中,响应式布局、碰撞处理、拖放和定位方式都可以按需配置。
响应式布局
在不同断点下调整列数和栅格项位置。
碰撞控制
可以推开其他栅格项、阻止碰撞,也可以允许重叠。
拖放
移动已有栅格项,或从外部拖入新项。
定位策略
可根据渲染需求选择 transform 定位或绝对定位。
样式定制
设置栅格线、占位符、背景和栅格项状态。
组合式 API
只使用布局引擎,自行决定页面结构。