Vue Grid Layout -️ Grid layout system suitable for Vue.js, used on vue3+

This grid system currently has the best support for vue2. Vue3 requires plug-in support, which will be explained in detail in this section.

1. Official website introduction

Official website address: https://madewithvuejs.com/vue-grid-layout
Chinese document: https://github.com/jbaysolutions/vue-grid-layout/blob/master/README-zh_CN.md

This grid layout has the following characteristics:

• Draggable
• Resizable
• Static components (cannot be dragged and resized)
• Bounds checking when dragging and resizing
• Avoid rebuilding the grid when adding or subtracting parts
• Serializable and restoreable layouts
• Automated RTL support
• Responsive
• Min/max w/h per item

2. Use in vue3

1). You need to import the version plug-in supported by vue3

pnpm add vue-grid-layout@3.0.0-beta1
// 安装结果
"vue-grid-layout": "3.0.0-beta1"

2).Introduce in main.js:

import gridLayout  from 'vue-grid-layout' 
app.use(gridLayout)

Note: After registering in main.js, there is no need to import the specific components used, and can be used directly (App.vue)

Because vue-grid-layout is the vue2 version but I use the vue3 version, I need to install vue3 dependencies and related configurations.

3), used in components

<template>
 <grid-layout
      v-model:layout="layout"
      :col-num="24"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="true"
      :is-mirrored="false"
      :vertical-compact="true"
      :margin="[10, 10]"
      :use-css-transforms="true"
    >
      <grid-item
        v-for="item in layout"
        :key="item.i"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :static="item.static"
      >
        <MyTasks
          v-if="item.name === '我的模块1'"
          :id="item.i"
          @deletePanelItemEvent="deletePanelItem"
        />
        <MyData
          v-if="item.name === '我的模块2'"
          :id="item.i"
          @deletePanelItemEvent="deletePanelItem"
        />
        <MyModel
          v-if="item.name === '我的模块3'"
          :id="item.i"
          @deletePanelItemEvent="deletePanelItem"
        />
        <ModelRun
          v-if="item.name === '我的模块4'"
          :id="item.i"
          @deletePanelItemEvent="deletePanelItem"
        />
      </grid-item>
    </grid-layout>
</template>

<script setup>
import {
    
     reactive } from "vue";

const layout= [
  {
    
     x: 0, y: 0, w: 12, h: 8, i: 0, name: '我的模块1', static: true,},
  {
    
     x: 12, y: 0, w: 12, h: 8, i: 1, name: '我的模块2' },
  {
    
     x: 0, y: 8, w: 12, h: 8, i: 2, name: '我的模块3' },
  {
    
     x: 12, y: 8, w: 12, h: 8, i: 3, name: '我的模块4' },
]
</script>

<style>
* {
    
    
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>

3. Calculation logic of layout layout

This is the data item of gridItem: { "x": 0, "y": 0, "w": 2, "h": 2, "i": "0" }, including x, y, w, h, i.

1. i: ID of the element in the raster
2. x: identifies which column the raster element is located in
3. y: identifies which row the raster element is located in
4. w: identifies the initial width of the grid element (the value is a multiple of colWidth)
5. h: Identifies the initial height of the grid element (the value is a multiple of rowHeight)
   . After understanding the basic concepts, let’s talk about the meaning of the parameters in detail (only take the first data item: { “x”: 0, “y”: 0, “w ": 2, "h": 2, "i": "0" }):
6. minW: The minimum width of the grid element (the value is a multiple of colWidth)
7. minH: The minimum height of the grid element (the value is a multiple of rowHeight)
8. maxW: The maximum width of the grid element (the value is a multiple of colWidth)
9. maxH: The maximum height of the grid element (the value is a multiple of rowHeight)

Width: Assume that the total can be divided into n columns, then, width - (n+1)*margin / n = the actual width of each element
Height: Assume that the total can be divided into m rows, then, row-height * m + (m + 1) * margin <= height
Therefore, the width and height of the element can be dynamically calculated based on the actual width and height of the drag area.

4. Properties of gridLayout

1. layout: The data source of grid layout. The data source is an array Array and the data items are objects. They must contain i, x, y, w and h attributes.
2. colNum: defines the number of columns in the raster system
3. rowHeight: the height of each row, in pixels
4. maxRows: defines the maximum number of rows
5. isDraggable: identifies whether the elements in the grid can be dragged
6. isResizable: Identifies whether the elements in the grid are resizable
7. preventCollision: prevent collision attribute, when the value is set to true, the grid can only be dragged to a blank space

(We set the data item width and height to 1 to facilitate viewing the effect)

colNum: is the number of defined columns

rowHeight: refers to the height of each row (the unit is px)

margin: defines the margin of elements in the grid (the first element in the array represents the horizontal margin, the second represents the vertical margin, the unit is pixels)

Other attributes are relatively simple and will not be introduced in detail. We will discuss them in detail later when we encounter them. The main thing is that everyone must understand the calculation rules. This framework is very easy to master. If you encounter a BUG, ​​it is basically a margin problem.