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 属性说明

grid-item 属性说明

相关事件方法

<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>