一个类似于Gridster的栅格布局系统Vue组件

哈喽,我是老鱼,一名致力于在技术道路上的终身学习者、实践者、分享者!

Vue Grid Layout是一个类似于Gridster的栅格布局系统, 适用于Vue.js,灵感来源于React Grid Layout。

特性

  • 可拖拽

  • 可调整大小

  • 静态部件(不可拖拽、调整大小)

  • 拖拽和调整大小时进行边界检查

  • 增减部件时避免重建栅格

  • 可序列化和还原的布局

  • 自动化 RTL 支持

  • 响应式

安装

Npm

npm i vue-grid-layout

Yarn

yarn add vue-grid-layout

浏览器

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

使用

引入

import VueGridLayout from 'vue-grid-layout';

加入到组件中

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

数据

`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"}

];

复制代码
new Vue({
    el: '#app',
    data: {
        layout: testLayout,
    },
});`

html

复制代码
    <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>

Github地址:https://github.com/jbaysolutions/vue-grid-layout

API文档地址:https://jbaysolutions.github.io/vue-grid-layout/

我是老鱼,白天敲代码,晚上搞自媒体。
课程 | 陪跑 | 项目 | 副业咨询

相关推荐
然我4 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子9 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹12 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器19 分钟前
指定阿里镜像原理
前端
枷锁—sha23 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha25 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜41 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss