vue-grid-layout

vue-grid-layout

  

vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired in React-Grid-Layout

Current version: 2.3.4 (Supports Vue 2.2+)

For Vue 2.1.10 and below use version 2.1.3

For Vue 1 use version 1.0.3

 

[Demo | Changelog]

Projects using vue-grid-layout

• Draxed
• cryptotiles
• Data Providers

Know of others? Create a PR to let me know!

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

Getting Started

Installation

npm

# install with npm    
npm install vue-grid-layout --save

# install with yarn    
yarn add vue-grid-layout

Import the library

    import VueGridLayout from 'vue-grid-layout';

Add to other Vue components

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

browser

Include the browser-ready bundle (download from releases) in your page. The components will be automatically available.

    <script src="vue-grid-layout.umd.min.js"></script>

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

转载于:https://www.cnblogs.com/Jeely/p/11231764.html