Vue Grid Layout -️ 适用 Vue.js 的栅格布局系统 (相关使用记录)

• 参考文章@~朴：shu
• 参考文章@我说爱你啊
• 中文文档
• 官方文档

安装

npm install vue-grid-layout --save
或yarn add vue-grid-layout

导入组件

import VueGridLayout from 'vue-grid-layout';

注册组件

 export default {components: {GridLayout: VueGridLayout.GridLayout,GridItem: VueGridLayout.GridItem},// ... data, methods, mounted (), etc.}

grid-layout 属性说明

属性名称	属性说明
col-num	画布占几列,默认 12 列
row-height	每行的高度，默认 150px
is-draggable	是否允许拖拽布局中的单元格，默认 true
is-resizable	是否允许缩放布局中的单元格，默认 true
max-rows	定义最大行数,你把它设置成 1 拖拽试试就知道它的作用了
margin	布局中单元格之间的间距，如果[10,10]
responsive	是否是响应式布局，比如大屏下显示 5 列，小屏幕下将会根据屏幕大小显示多少列。默认为 false
is-mirrored	镜像反转，就是布局是从左到右还是从右到左
auto-size	布局的容器是否自动自动大小
vertical-compact	是否开启垂直压缩，设置 true 或 false 试试看
prevent-collision	防止碰撞，设置为 ture 时，单元格只能拖动到空白处
use-css-transforms	否使用 CSS 属性 transition-property: transform
breakpoints	为响应式布局设置断点,默认为 { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }，里面的单位为像素 px
cols	设置每个断点对应的列数,默认{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }。
use-style-cursor	是否使用动态鼠标指针样式，当拖动出现卡顿时，将此值设为 false 也许可以缓解布局问题。

grid-item 属性说明

属性名称	属性说明
i	单元格的 id,字符串类型
x	单元格起始列
y	单元格起始行
w	单元格占几列
h	单元格占几行
min-w	单元格最小宽度占几列，缩放单元格时起作用
min-h	单元格最小宽度占几行，缩放单元格时起作用
max-w	单元格最大宽度占几列，缩放单元格时起作用
max-h	单元格最大宽度占几行，缩放单元格时起作用
is-draggable	单元格是否允许拖拽，如果为 null 取决父容器
is-resizable	单元格是否允许缩放，如果为 null 取决父容器
static	单元格是否是静态的，默认为 false,如果是那么无法缩放、拖动、被其他元素影响
drag-ignore-from	css 筛选器，设置那些元素无法触发拖拽事件，比如’a, button’
drag-allow-from	css 筛选器，那些元素可以触发拖拽事件，默认为 null,全部元素
resize-ignore-from	css 筛选器，那些元素无法触发调整大小事件

相关事件方法

<grid-layout:layout="layout":col-num="12":row-height="30"@layout-created="layoutCreatedEvent"@layout-before-mount="layoutBeforeMountEvent"@layout-mounted="layoutMountedEvent"@layout-ready="layoutReadyEvent"@layout-updated="layoutUpdatedEvent"@breakpoint-changed="breakpointChangedEvent"
><grid-itemv-for="item in layout":x="item.x":y="item.y":w="item.w":h="item.h":i="item.i":key="item.i"@resize="resizeEvent"@move="moveEvent"@resized="resizedEvent"@container-resized="containerResizedEvent"@moved="movedEvent">{{item.i}}</grid-item>
</grid-layout>
<script>var app = new Vue({el: "#app",methods: {//****************** GridLayout ************************//对应Vue生命周期的createdlayoutCreatedEvent: function (newLayout) {console.log("Created layout: ", newLayout);},//对应Vue生命周期的beforeMountlayoutBeforeMountEvent: function (newLayout) {console.log("beforeMount layout: ", newLayout);},//对应Vue生命周期的mountedlayoutMountedEvent: function (newLayout) {console.log("Mounted layout: ", newLayout);},//当完成mount中的所有操作时生成的事件layoutReadyEvent: function (newLayout) {console.log("Ready layout: ", newLayout);},//更新事件（布局更新或栅格元素的位置重新计算）layoutUpdatedEvent: function (newLayout) {console.log("Updated layout: ", newLayout);},//每次断点值由于窗口调整大小而改变breakpointChangedEvent: function (newBreakpoint, newLayout) {console.log("断点=", newBreakpoint, ", layout: ", newLayout);},//****************** GridItem ************************//单元格移动时的事件moveEvent: function (i, newX, newY) {console.log("移动中 i=" + i + ", X=" + newX + ", Y=" + newY);},//单元格调整大小时的事件resizeEvent: function (i, newH, newW, newHPx, newWPx) {console.log("调整大小中 i=" + i);},//单元格移动后的事件movedEvent: function (i, newX, newY) {console.log("移动完成 i=" + i);},//单元格调整大小后的事件resizedEvent: function (i, newH, newW, newHPx, newWPx) {console.log("调整大小完成 i=" + i);},//单元格或单元格容器更改大小的事件（浏览器窗口或其他）containerResizedEvent: function (i, newH, newW, newHPx, newWPx) {console.log("容器大小改变了 i=" + i);},},});
</script>

项目示例(简易)

<template><div class="customhome-container"><grid-layout:layout.sync="layout":col-num="12":row-height="30":is-draggable="true":is-resizable="true":is-mirrored="false":vertical-compact="true":margin="[10, 10]":use-css-transforms="true"><grid-itemclass="gridItem"v-for="item in layout":x="item.x":y="item.y":w="item.w":h="item.h":i="item.i":key="item.i">{{ item.i }}</grid-item></grid-layout></div>
</template><script>import { GridLayout, GridItem } from "vue-grid-layout";export default {components: {GridLayout,GridItem,},data() {return {// 定义栅格系统数据源layout: [{ 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: 3, 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" },],};},methods: {},mounted() {},};
</script>
<style lang="scss" scoped>.gridItem {border: solid black 1px;background-color: #cccccc;}
</style>