What is Vue Grid Layout?

@weibin.zheng/vue-grid-layout is a rebuilt version ofvue-grid-layout, in codes it use Composition API and Typescript to get codes cleaner and more readable, meanwhile it introduce vue-demi to build a universal library, which can be used in both Vue 2 and Vue 3.

Features

• Draggable widgets
• Resizable widgets
• Static widgets
• Bounds checking for dragging and resizing
• Widgets may be added or removed without rebuilding grid
• Layout can be serialized and restored
• Automatic RTL support (resizing not working with RTL on 2.2.0)
• Responsive

Documentation

Installation

Vue 2.7+ || Vue 3.x

    # Using npm
    npm install @weibin.zheng/vue-grid-layout --save

    # Using yarn
    yarn add @weibin.zheng/vue-grid-layout

<= Vue 2.6

`@vue/composition-api` is needed for Vue 2.6 and lower.

    # Using npm
    npm install @weibin.zheng/vue-grid-layout @vue/composition-api --save

    # Using yarn
    yarn add @weibin.zheng/vue-grid-layout @vue/composition-api

Import

// 导入组件
import { GridLayout, GridItem } from "@weibin.zheng/vue-grid-layout";

// 引入内置的CSS
import "@weibin.zheng/vue-grid-layout/style.css";

Register

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

Usage

var testLayout = [
  { 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" },
];

export default {
  data: {
    layout: testLayout,
  },
};

<grid-layout
  v-model:layout="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
    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>

Check out the Documentation Website for further details

Contribute

If you have a feature request, please add it as an issue or make a pull request.

Developed by Weibin.Zheng ([email protected])