vue 网格布局
Vue网格布局 (vue-grid-layout)
vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired in React-Grid-Layout
vue-grid-layout是Vue.js的网格布局系统,例如Gridster。 在React-Grid-Layout中大受启发
使用vue-grid-layout的项目 (Projects using vue-grid-layout)
Know of others? Create a PR to let me know!
认识别人吗? 建立公关让我知道!
特征 (Features)
Draggable widgets
可拖动的小部件
Resizable 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
自动RTL支持
入门 (Getting Started)
安装 (Installation)
Install the vue-grid-layout package package using npm:
npm install vue-grid-layout
用法 (Usage)
npm install vue-grid-layout
or include the script in your html (download from releases):
或将脚本包含在html中(从releases下载):
<script src="vue-grid-layout.min.js"></script>
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":4,"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"