Vue Grid Layout

前言

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

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

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

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

使用

安装和引入

安装

npm install vue-grid-layout --save

局部引入

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

import VueGridLayout from 'vue-grid-layout';export default {components: {GridLayout: VueGridLayout.GridLayout,GridItem: VueGridLayout.GridItem},// ... data, methods, mounted (), etc.}

属性、事件、样式

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

示例

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！