Vue Grid Layout_vuegridlayout官网

前言

前几天同事分享了一个业务功能的做法用到了这个依赖，就简单看了一下。为了防止自己以后也会用到，就先简单学习一下。

官网：Vue Grid Layout -️ 适用Vue.js的栅格布局系统

哎，博客写了一半了，运行官方给的demo时结果报错了，原来还不支持vue3

看了一下issues：https://github.com/jbaysolutions/vue-grid-layout/issues/439 感觉适配vue3有点渺茫。

使用

安装和引入

安装

npm install vue-grid-layout --save
1

局部引入

这里使用官方给的局部引入方式

import VueGridLayout from 'vue-grid-layout';

 export default {
     components: {
         GridLayout: VueGridLayout.GridLayout,
         GridItem: VueGridLayout.GridItem
     },
 // ... data, methods, mounted (), etc.
 }
1
2
3
4
5
6
7
8
9

属性、事件、样式

略，官网写的很详细，这里就不搬运了

示例

官网给了10个例子：基本、移动事件并调整大小、多个栅格、拖动允许/忽略元素、镜像反转栅格布局、响应式、防止碰撞、响应预定义的布局、动态添加/删除、从外面拖动