当前位置：网站首页 > 技术文章 > 正文

基于 Vue.js 磁片栅格布局组件VueGridLayout

myzbx 2025-03-19 14:50 20 浏览

#头条创作挑战赛#

今天给大家分享一个超优秀的 vue.js 拖拽栅格布局插件VueGridLayout。

vue-grid-layout 一款基于 vue 可拖拽缩放的栅格组件。star高达5.9K+。

功能性

可拖拽
可调整大小
静态部件（不可拖拽、调整大小）
拖拽和调整大小进行边界检查
增减部件时避免重建栅格
可序列化和还原的布局
自动化 RTL 支持
响应式

安装

npm install vue-grid-layout -D

引入使用

import VueGridLayout from 'vue-grid-layout';

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



        
            {{item.i}}

非常不错的一款拖拽瓷片组件，有需要的小伙伴可以去看下哈。

# 文档地址
https://jbaysolutions.github.io/vue-grid-layout/
# 仓库地址
https://github.com/jbaysolutions/vue-grid-layout

ok，今天的分享就到这里。

CSS 网格布局模块

上一篇：15款响应式布局必备的jQuery Grid网格插件
下一篇：Grid网格布局一种更灵活、更强大的二维布局模型!

相关推荐

数据结构之顺序表（数据结构顺序表图书管理系统）: 线性表定义线性表是n(n≥0)个具有相同特性的数据元素的有限序列。记作：（a1,a2,…,ai-1,ai,ai+1,…,an）线性表相关概念直接前驱元素：ai-1领先于ai,称a...

每一个成熟的人，都需要具备「翻篇」这种能力: “翻篇儿”——仿佛读出这个儿化音，才够表达那种潇洒的感觉是一种人生中非常重要的心理过程和心理技能。人生注定不完美，我们只要活着就会遭遇不愉快的经历，只有及时翻篇儿，才能把更多注意力放在当下，不被过去的...

打通 JAVA 与内核系列之一 ReentrantLock 锁的实现原理: 写JAVA代码的同学都知道，JAVA里的锁有两大类，一类是synchronized锁，一类是concurrent包里的锁（JUC锁）。其中synchronized锁是JAVA语言层面提供的能力，在此不...

韩国吃货主播，美食声控咀嚼音，你是搬运工，好吃到停不下来: 刘姐畅谈。Hey，Hongsi。TodaywehaveassortedtoysthatImade。Foryouguysfirst。Itlookscrunchybecause...

黄子韬2019新歌最好的我们完整歌词介绍在哪可以听: 最好的我们(TheBestofUs)-黄子韬词：黄子韬曲：黄子韬编曲：DarylK制作人：DarylK助理制作：郭舒文和音：黄子韬电吉他：CalvinC木吉他：雷十一录音室：Kong...

刷一道LeetCode -- 三数之和（三数之和算法）: 原题：https://leetcode-cn.com/problems/3sum/给你一个包含n个整数的数组nums，判断nums中是否存在三个元素a，b，c，使得a+b+c...

隐藏在阳光当中的地球刺客（隐藏在阳光下的秘密）: 小行星什么时候会撞击地球？这一直是大家比较关注的问题，特别是当大家知道地球上前一任住户是亡于小行星之后，就更加关注这个问题了。图1尤卡坦半岛的陨石坑（NASA）实际上，地球每天都会遭受到一些天体的袭...

安卓手机爱奇艺app中离线视频导出: 安卓手机爱奇艺app中离线视频导出：通常我在爱奇艺中发现好的视频，想保存下来，点击离线缓存，缓存好后，在手机上可以查看，但是使用手机连接电脑打开后，发现保存视频的文件夹是空的。1)在手机中爱奇艺文...

50款经典奥斯汀月季，超多图片，抗病好养新手必种的月季: 【50款经典奥斯汀月季】大家好，今天来给大家介绍50款经典的奥斯汀月季，奥斯汀是一位伟大的育种家，以他命名的奥斯汀公司也繁育出了数量众多的月季品种。根据木木的种植经验，奥斯汀的月季大多植株长势良...

你也想像J姐一样在梦幻芭比大house里“哭泣”吗?: “6年前我的兜里只揣着400元美金，现如今我已经住上了这上亿豪宅”他是一个我行我素，敢说敢做的一个网红博主他测评过的彩妆都卖断货了他的自创同名品牌深受好评他就是JeffreeStar，你们传说中的J...

VB Do While\Until，Loop循环语句: DoWhile\Until…….Loop循环语句上一节讲了For……Next循环语句，这节讲DoWhile\Until…….Loop循环语句。有人会有疑问，既然有For循环，还要Do循环干什么？它...

EXCEL退出DO LOOP循环语句|until、while: 退出某语句，我们前面都是用exit，退出程序用end，exit可用于退出fornext，也可用于doloop循环。今天我们来学习退出DOLOOP语句的另外两个语句，until和while。还是前...

词根词缀 - 词根 1-38:circ,cycl=ring,circle,表示"圆,环”: circ,cycl=ring,circle,表示“圆,环”circlet/'srklt/中文释义：小环，小圈。英文释义：asmallcircularband,oftendecorative...

优化 JavaScript 循环:除了 for，还有这些更快的选择: 循环是我们处理JavaScript数据集合的基本工具。虽然传统的for循环已经为我们服务多年，但现代JavaScript提供了更多高效、可读性更强的选择。分享一些替代方案，以及它们在性能和可读...

vue的v-for循环普通数组、对象数组、对象、数字: <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8...

一周热门

最近发表

首页
收录
顶部