Vue Grid Layout ( 栅格布局 )

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-item
    v-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生命周期的created
      layoutCreatedEvent: function (newLayout) {
        console.log("Created layout: ", newLayout);
      },
      //对应Vue生命周期的beforeMount
      layoutBeforeMountEvent: function (newLayout) {
        console.log("beforeMount layout: ", newLayout);
      },
      //对应Vue生命周期的mounted
      layoutMountedEvent: 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-item
        class="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>