What is?

Git address: vue-grid-Layout

The official demo

code

The online demo

Common parameter analysis

GridLayout

parameter meaning The data type
colNum How many blocks to divide a row into The default number is 12.
rowHeight Line height The number defaults to px
isDraggable Whether you can drag and drop boolean
isResizable If you can change the size boolean
responsive Is it responsive boolean

GridItem

parameter meaning type
i id Any type
x How many columns digital
y Which line digital
w A few pieces of digital
h Height, the final calculated element height is H *rowHeight digital

The main code

Define a default layout

var testLayout = [
  {x: 0,y: 0,w: 6,h: 5,i: "0",component: "test1"},//0 *rowHeight {x: 6, y: 0, w: 6, h: 5, I: 5*rowHeight {x: 6, y: 0, w: 6, h: 5, I: 6"1", component: "test2"{x: 0,y: 5,w: 12,h: 10, I:"2",component: "test3"}, {x: 0,y: 15,w: 12,h: 10, I:"3",component: "test4"}];Copy the code

To generate the layout

// The largest grid is boundtestLayout, and so ontestThe Layout will be zoomed in and out as the user drags // see the official instance < grie-Layout :layout.sync="testLayout"
          :col-num="12"
          :row-height="55"
          :is-draggable="draggable"
          :is-resizable="resizable"
          :auto-size="true"
          :responsive="responsive"> / / traversetestLayout generates item <grid-item v-for="item in testLayout"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :i="item.i"
            :key="item.key"
          >
            <div class="assistor"// Define a close button to remove the current <div class="close-icon" @click="deleteComponent(item.i)">
                <i class="el-icon-close"></i>
              </div>
              <h4 style="margin-bottom:10px">{{item.title}}</h4> <component :is="item.component" style="padding-bottom:20px"></component>
            </div>
          </grid-item>
        </grid-layout>
Copy the code

CSS styles

Define the background color for the entire layout

.vue-grid-layout {
  position: relative;
  background: #fff;
}
Copy the code

Define a style for each item

.vue-grid-item{

}

Copy the code

The style of the elements inside the GridItem here we’re going to add an assistor inside the grie-item, because if the element inside the Grie-item gets too big we’re going to have a scrollbar here we’re going to add border to the assistor, Of course you can also add to.vue-grid-item, but if you need to add components dynamically, the boder will not be added when adding components.

.assistor {
  height: 100%;
  overflow-y: scroll;
  padding: 10px;
  border: 1px solid rgb(224, 219, 219);
}
Copy the code

Add a close button

.close-icon {
  float: right;
  position: absolute;
  text-align: right;
  right: 0px;
  top: 0px;
  z-index: 200;
}
Copy the code

The realization idea of dynamic increase and decrease

In fact, it is the simplest addition to the layout, which directly occupies the first line

this.testLayout.push({
        x: 0,
        y: 0,
        w: 12,
        h: 5,
        i: this.layout.length,
        name: "test5"
      });
Copy the code

For subtraction, you can just delete the id that was passed in

deleteComponent(id){
  this.testLayout = this.testLayout.filter(
      item =>item.id===id
    );
}

Copy the code

The database

Simply store testLayout in the database.

This article was typeset using MDNICE