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

ztj100 2025-03-30 00:21 35 浏览 0 评论

今天给大家分享一个超优秀的 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，今天的分享就到这里。

vue methods

上一篇：Vue3集成mqtt支持动态切换ws和wss协议
下一篇：带你快速直接使用 Vue3（vue3怎么样）

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

功能性

安装

引入使用

相关推荐

取消回复欢迎你发表评论:

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

面试官:使用int类型做加减操作，是线程安全吗

C++编程知识:ToString()字符串转换你用正确了吗?

【Spring Boot】WebSocket 的 6 种集成方式

PyTorch 深度学习实战(26):多目标强化学习Multi-Objective RL

pytorch中的 scatter_()函数使用和详解

与 Java 17 相比，Java 21 究竟有多快?

基于TensorRT_LLM的大模型推理加速与OpenAI兼容服务优化

这一次，彻底搞懂Java并发包中的Atomic原子类

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

功能性

安装

引入使用

相关推荐

取消回复欢迎 你 发表评论:

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

面试官:使用int类型做加减操作，是线程安全吗

C++编程知识:ToString()字符串转换你用正确了吗?

【Spring Boot】WebSocket 的 6 种集成方式

PyTorch 深度学习实战(26):多目标强化学习Multi-Objective RL

pytorch中的 scatter_()函数使用和详解

与 Java 17 相比，Java 21 究竟有多快?

基于TensorRT_LLM的大模型推理加速与OpenAI兼容服务优化

这一次，彻底搞懂Java并发包中的Atomic原子类

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起