前端UI组件【免费下载链接】vue-grid-layoutA draggable and resizable grid layout, for Vue.js.项目地址https://gitcode.com/gh_mirrors/vu/vue-grid-layout点击查看免费下载本文基于仓库中 website/docs/guide/08-responsive-predefined-layouts.md 对应的官方示例展开。在 vue-grid-layout 中响应式布局不止是让列数随窗口宽度变化还可以为每个断点breakpoint预先定义一套独立的布局。通过responsive-layouts属性你可以在 lg / md / sm / xs / xxs 各断点分别指定网格项的摆放位置与尺寸让不同屏幕宽度呈现完全不同的栅格结构。读完本文你将掌握预定义响应式布局的完整配置方法、数据结构、断点匹配规则以及底层断点切换与布局生成源码的工作原理。一、什么是响应式预定义布局vue-grid-layout的responsive属性可以开启按窗口宽度切换列数的能力但只有列数变化往往不够同样一张仪表盘在宽屏上希望某些组件并排展示在窄屏上则希望它们纵向堆叠。预定义布局predefined layouts正是为此设计——你可以为每个断点单独提供一份完整的layout数组组件在断点切换时直接切换到对应布局而不是机械地把同一份布局压缩进更少的列。这一特性由responsive-layouts属性承载。在 properties.md 中它的定义如下typeObjectrequiredfalsedefault{}该对象以断点名称为键、以 layout 数组为值例如{ lg: [layout items], md: [layout items] }。文档同时明确提示GridLayout 创建完成后再设置该属性不会生效因此预定义布局应在初始化时一次性传入。responsive-layouts需要与responsive、breakpoints、cols三个属性配合使用详见 properties.md下文将结合官方示例逐一拆解。二、官方示例为 md / lg 断点预定义布局仓库中的官方示例页面 Example08ResponsivePredefinedLayouts.vue 完整演示了这一特性。模板部分如下template div grid-layout :layout.synclayout :responsive-layoutslayouts :col-num12 :row-height30 :is-draggabledraggable :is-resizableresizable :vertical-compacttrue :use-css-transformstrue :responsiveresponsive breakpoint-changedbreakpointChangedEvent grid-item v-foritem in layout :xitem.x :yitem.y :witem.w :hitem.h :iitem.i span classtext{{item.i}}/span /grid-item /grid-layout /div /template脚本部分定义了testLayouts其中包含md与lg两套预定义布局并通过layout: testLayouts[lg]让初始布局使用大屏版本import { GridLayout, GridItem } from vue-grid-layout let testLayouts { md: [ {x:0, y:0, w:2, h:2, i:0}, {x:2, y:0, w:2, h:4, i:1}, {x:4, y:0, w:2, h:5, i:2}, {x:6, y:0, w:2, h:3, i:3}, {x:2, y:4, w:2, h:3, i:4}, {x:4, y:5, w:2, h:3, i:5}, {x:0, y:2, w:2, h:5, i:6}, {x:2, y:7, w:2, h:5, i:7}, {x:4, y:8, w:2, h:5, i:8}, {x:6, y:3, w:2, h:4, i:9}, {x:0, y:7, w:2, h:4, i:10}, {x:2, y:19, w:2, h:4, i:11}, {x:0, y:14, w:2, h:5, i:12}, {x:2, y:14, w:2, h:5, i:13}, {x:4, y:13, w:2, h:4, i:14}, {x:6, y:7, w:2, h:4, i:15}, {x:0, y:19, w:2, h:5, i:16}, {x:8, y:0, w:2, h:2, i:17}, {x:0, y:11, w:2, h:3, i:18}, {x:2, y:12, w:2, h:2, i:19} ], lg: [ {x:0,y:0,w:2,h:2,i:0}, {x:2,y:0,w:2,h:4,i:1}, {x:4,y:0,w:2,h:5,i:2}, {x:6,y:0,w:2,h:3,i:3}, {x:8,y:0,w:2,h:3,i:4}, {x:10,y:0,w:2,h:3,i:5}, {x:0,y:5,w:2,h:5,i:6}, {x:2,y:5,w:2,h:5,i:7}, {x:4,y:5,w:2,h:5,i:8}, {x:6,y:4,w:2,h:4,i:9}, {x:8,y:4,w:2,h:4,i:10}, {x:10,y:4,w:2,h:4,i:11}, {x:0,y:10,w:2,h:5,i:12}, {x:2,y:10,w:2,h:5,i:13}, {x:4,y:8,w:2,h:4,i:14}, {x:6,y:8,w:2,h:4,i:15}, {x:8,y:10,w:2,h:5,i:16}, {x:10,y:4,w:2,h:2,i:17}, {x:0,y:9,w:2,h:3,i:18}, {x:2,y:6,w:2,h:2,i:19} ], }; export default { components: { GridLayout, GridItem }, data() { return { layouts: testLayouts, layout: testLayouts[lg], draggable: true, resizable: true, responsive: true, } }, methods: { breakpointChangedEvent: function(newBreakpoint, newLayout){ console.log(BREAKPOINT CHANGED breakpoint, newBreakpoint, , layout: , newLayout ); } } }对比lg与md两套布局可以发现二者都包含 20 个组件i从0到19但在大屏lg12 列下组件可以横向排到第 10 列而中屏md布局则将同一批组件收拢到 8 列以内并重新调整了y坐标——这就是预定义的意义同一个组件的横纵位置、所占行列随断点分别定制。需要说明的是示例中的每个组件都声明了w: 2。w的单位是列宽其实际像素宽度由网格列数换算而来GridItem的w是乘以列宽得到像素宽度详见 properties.md因此相同w在 12 列和 8 列网格中的实际像素宽度并不相同。三、断点、列数与预定义布局三个核心属性预定义布局能否按预期工作取决于下面三个属性的配合默认值来自 GridLayout.vue 与 properties.md1.responsiveBoolean默认false总开关。只有为true时网格才会监听容器宽度变化、切换断点并应用对应的预定义布局。关闭状态下布局始终保持col-num指定的固定列数。从源码的watch.responsive逻辑可以看到GridLayout.vue当responsive被置为false时组件会通过update:layout事件将layout还原为originalLayout初始布局并把列数恢复到col-num的值置为true时则重新执行onWindowResize()触发布局重算。2.breakpointsObject默认{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }定义各断点对应的窗口宽度阈值像素。lg 为大屏large、md 为中屏medium、sm 为小屏small、xs 为超小屏extra small、xxs 为最小屏。断点的匹配规则是取所有满足width breakpoint的最高断点这一点在 responsiveUtils.js 的getBreakpointFromWidth中实现断点按宽度升序排序后遍历找到最后一个满足width breakpoints[name]的断点作为当前断点。3.colsObject默认{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }定义每个断点下的列数。当getColsFromBreakpoint找不到某个断点的列数配置时会直接抛出错误responsiveUtils.js因此breakpoints中出现的断点最好都在cols中有对应配置。4. 示例中的固定参数col-num12colNum属性默认 12定义网格列数在响应式模式下它作为非响应式基准列数响应式开关关闭时使用md布局按 10 列cols.md展示而lg布局恰好按 12 列展示。row-height30每行像素高度默认 150示例中设为 30使网格更紧凑组件高度h乘以rowHeight得到像素高度properties.md。vertical-compacttrue开启纵向压缩默认即 true断点切换生成布局时会调用compact消除纵向空隙。use-css-transformstrue使用 CSS transform 定位元素properties.md。四、断点切换的底层原理responsiveGridLayout与布局生成在 GridLayout.vue 的responsiveGridLayout()中断点切换与布局应用分为四步计算当前断点调用getBreakpointFromWidth(this.breakpoints, this.width)根据容器当前像素宽度得出断点名称再调用getColsFromBreakpoint得到该断点下的列数。保存当前断点布局如果上一次断点对应的布局尚未保存则cloneLayout一份存入内部layouts对象保证用户在切换前对当前断点布局的拖拽修改不会丢失。查找或生成新布局调用findOrGenerateResponsiveLayout(originalLayout, layouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, verticalCompact)。同步结果发出breakpoint-changed事件、通过update:layout同步layout、更新lastBreakpoint并向子组件广播新的列数setColNum。findOrGenerateResponsiveLayout的核心逻辑responsiveUtils.js体现了预定义优先、就近生成兜底的原则若layouts[breakpoint]已存在直接返回克隆的预定义布局否则按断点宽度排序从当前断点向上查找最近的、已存在的布局作为基准对该基准布局执行correctBounds(layout, { cols })将超出新列数边界的组件修正回合法范围后再执行compact纵向压缩从而生成出当前断点下的可用布局。这正是示例的隐藏含义testLayouts只定义了md和lg两套布局当窗口宽度落入sm768px 以下、xs480px 以下或xxs时组件不会报错而是从md布局出发按sm: 6、xs: 4、xxs: 2的列数自动校正边界并压缩生成新布局。若希望小屏也有完全定制的手写布局只需在responsive-layouts中补充sm、xs、xxs键即可。五、breakpoint-changed事件与布局同步示例模板中绑定了breakpoint-changedbreakpointChangedEvent其回调签名是(newBreakpoint, newLayout)在源码中于断点真正切换时触发GridLayout.vueif (this.lastBreakpoint ! newBreakpoint) { this.$emit(breakpoint-changed, newBreakpoint, layout); }回调里通过console.log输出当前断点名称与完整布局数组breakpointChangedEvent: function(newBreakpoint, newLayout){ console.log(BREAKPOINT CHANGED breakpoint, newBreakpoint, , layout: , newLayout ); }实际开发中该事件可用于上报用户当前所处的断点环境、在断点变化时联动图表尺寸重绘、或根据断点执行组件外部的业务逻辑。注意事件只在断点发生变化时触发同一断点内的宽度变化如同一 lg 区间内拖拽窗口不会重复触发。此外模板中:layout.synclayout是响应式布局正常工作的关键update:layout事件会通过.sync修饰符把生成的布局写回父组件的layout数据从而驱动v-for渲染出的grid-item位置更新。六、注意事项与实战建议预定义布局必须在初始化时传入responsive-layouts在 GridLayout 创建后再修改不会生效properties.md组件挂载时通过initResponsiveFeatures()将responsiveLayouts拷贝进内部layouts对象GridLayout.vue。需要动态变更断点布局时应走layout数据本身的增删改通道。各断点布局的组件集合应保持一致示例中md与lg都包含0到19共 20 个组件。若断点间组件数量不一致源码会在layoutUpdate中通过findDifference比较当前布局与原始布局的差异并更新originalLayoutGridLayout.vue——这用于支持动态增删场景但对纯预定义布局而言保持各断点i一致更易于维护。利用就近生成减少重复劳动只需为相邻的关键断点如lg、md手写布局其余断点会自动基于最近的上层布局校正列边界并压缩生成适合组件在窄屏下以每行两个、纵向堆叠的简单形态呈现的场景。关闭响应式会还原初始布局从watch.responsive的实现看将responsive置为false时布局会回到originalLayout即初始化传入的layout因此示例中将layout初始化为testLayouts[lg]关闭响应式后页面回到大屏12 列形态。断点切换会覆盖拖拽结果由于responsiveGridLayout每次都会取出预定义布局或基于基准布局重新生成用户在 A 断点拖拽后的新位置会被保存步骤 2 的 clone 逻辑并在回到该断点时恢复但如果某一断点始终走生成路径没有手写布局其布局会在每次进入时重新从上层布局计算得出。七、小结vue-grid-layout 的响应式预定义布局能力可以概括为一条主线responsive开启监听 → 按breakpoints匹配当前断点 → 按cols确定列数 → 优先取用responsive-layouts中手写的该断点布局缺失时基于最近的上层布局自动校正生成 → 通过breakpoint-changed与update:layout完成状态同步。结合 Example08ResponsivePredefinedLayouts.vue 的完整示例、responsiveUtils.js 的匹配与生成算法以及 properties.md 的属性说明你可以据此为项目搭建一套大屏舒展、小屏堆叠的多态栅格界面。扩展阅读响应式布局的通用用法可参考 06-responsive.md动态增删布局项可参考 09-dynamic-add-remove.md完整属性清单见 properties.md。赞分享前端UI组件【免费下载链接】vue-grid-layoutA draggable and resizable grid layout, for Vue.js.项目地址https://gitcode.com/gh_mirrors/vu/vue-grid-layout点击查看免费下载相关推荐vue-grid-layout 响应式预定义布局使用 responsive-layouts 为每个断点定制网格vue grid layout 响应式预定义布局使用 responsive layouts 为每个断点定制网格 导读 本文讲解 vue grid layout前端UI组件JBot与Slack API深度集成消息发送与事件监听实战JBot与Slack API深度集成消息发送与事件监听实战 JBot是一款功能强大的开源聊天机器人框架能够与Slack API深度集成实现消息发送与事件监Vue Grid Layout完全指南构建可拖拽的响应式网格布局Vue Grid Layout完全指南构建可拖拽的响应式网格布局 Vue Grid Layout是一个专为Vue.js设计的强大拖拽布局库能够轻松创建响应式前端UI组件上一篇pixelfed开源图片分享平台的卓越选择下一篇Validity90为开源指纹识别驱动带来新可能创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考