目录1、前言2、安装3、属性4、事件5、占位符样式修改6、案例 1、前言 vue-grid-layout是一个适用于vue的拖拽栅格布局库,功能齐全,适用于拖拽+高度/宽度自由调节的布局需求。本文将讲述一些常用参数和事件,以及做一个同步拖拽的Demo。效果动态图如下: 2、安装 vue2版本:
vue2-grid-layout Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints and fixes files npm run lint Customize configuration SeeConfiguration Reference.
layout: JSON.parse(localStorage.getItem("layout")) || [ { i: "0", x: 0, y: 0, w: 2, h: 2 }, { i: "1", x: 2, y: 0, w: 2, h: 4 }, { i: "2", x: 4, y: 0, w: 2, h: 5 }, ], }; }, methods: { onLayoutUpdated(newLayout) { this.layout = newLayou...
Documentation Website What is Vue Grid Layout? vue-grid-layout is a grid layout system, likeGridster, for Vue.js.Heavily inspired byReact-Grid-Layout Features Draggable widgets Resizable widgets Static widgets Bounds checking for dragging and resizing ...
1.vue2版本 yarn add vue-grid-layout 1. import { GridLayout, GridItem } from "vue-grid-layout"; 1. 2.vue3版本 yarn add vue-grid-layout@3.0.0-beta1 1. import VueGridLayout from 'vue-grid-layout'; app.use(VueGridLayout);
i:"0",//索引值 必填h: 4,//高度 必填w: 7,//宽度 必填x: 2,//x 轴距离 必填y: 0,//y轴距离 必填minW:5//最小宽度 当 w的值小于minW时 采用minW的值minH:3//同上maxW:8//的最大宽度。如果w大于maxW,那么w将被设置为maxW。maxH:6//同上isDraggable:true//单独控制这一个盒子是否可以...
default: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 } Defines number of columns for each breakpoint GridItem Events Move and resize event listeners can be added to each grid-item, so that the parent Vue can be notified when a grid element is being moved or resized. Moved and res...
2生命周期layoutcreatedlayoutcreatedevent布局创建事件layoutbeforemountlayoutbeforemountevent布局安装以前事件layoutmountedlayoutmountedevent布局安装事件layoutreadylayoutreadyevent布局准备活动layoutupdatedlayoutupdatedevent格子位置大小更新每个单独控制需要注意的是每一个属性都要在data中注册一下不然会导致不能拖拽或者不能放大...
i="item.i" :key="item.i"> {{item.i}} </grid-item> </grid-layout> 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"...
default: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 } Defines number of columns for each breakpoint GridItem Events Move and resize event listeners can be added to each grid-item, so that the parent Vue can be notified when a grid element is being moved or resized. Moved and res...