使用vue-grid-layout完成桌面拖拽布局功能
时间:2018-11-15
本文章向大家介绍使用vue-grid-layout完成桌面拖拽布局功能,需要的朋友可以参考一下
安装 vue-gird-layout
https://github.com/jbaysolutions/vue-grid-layout
先跑一遍demo 运行起来。
# install with npm
npm install vue-grid-layout --save
index.vue
1 <template> 2 <div class="board" style="width: 100%"> 3 <div class="home"> 4 <grid-layout 5 :layout="layoutData" 6 :col-num="12" 7 :row-height="layoutHeight" 8 :is-draggable="dialogVisible" 9 :is-resizable="dialogVisible" 10 :is-mirrored="false" 11 :vertical-compact="true" 12 :margin="[10, 10]" 13 :use-css-transforms="true" 14 > 15 <grid-item v-for="(item,index) in layoutData" 16 :x="item.x" 17 :y="item.y" 18 :w="item.w" 19 :h="item.h" 20 :i="item.i" 21 :key="item.i" 22 > 23 {{index}} 24 </grid-item> 25 </grid-layout> 26 </div> 27 </div> 28 </template> 29 30 <script> 31 import layoutData from '@/virtualData/layoutData.json' 32 import VueGridLayout from 'vue-grid-layout' 33 34 const GridLayout = VueGridLayout.GridLayout 35 const GridItem = VueGridLayout.GridItem 36 export default { 37 data() { 38 return { 39 // 布局数据 40 layoutData: [], 41 layoutConfig: { 42 height: 100, // 默认高度 43 dialogVisible: false // 是否可拖拽或改变大小 44 } 45 } 46 }, 47 components: { 48 GridLayout, 49 GridItem 50 }, 51 methods: { 52 init() { 53 this.layoutData = layoutData.mainData 54 } 55 }, 56 created() { 57 this.init() 58 } 59 } 60 61 </script> 62 63 64 <style lang="scss" scoped> 65 </style>
layoutData.json
{ "mainData": [ { "x": 0, "y": 0, "w": 1, "h": 1, "i": "0" }, { "x": 0, "y": 1, "w": 1, "h": 1, "i": "1" }, { "x": 0, "y": 2, "w": 1, "h": 1, "i": "2" }, { "x": 0, "y": 3, "w": 1, "h": 1, "i": "3" }, { "x": 1, "y": 0, "w": 1, "h": 1, "i": "4" }, { "x": 1, "y": 1, "w": 1, "h": 1, "i": "5" }, { "x": 1, "y": 2, "w": 1, "h": 1, "i": "6" }, { "x": 1, "y": 3, "w": 1, "h": 1, "i": "7" }, { "x": 2, "y": 0, "w": 1, "h": 1, "i": "8" }, { "x": 2, "y": 1, "w": 1, "h": 1, "i": "9" }, { "x": 2, "y": 2, "w": 1, "h": 1, "i": "10" }, { "x": 2, "y": 3, "w": 1, "h": 1, "i": "11" }, { "x": 3, "y": 0, "w": 1, "h": 1, "i": "12" }, { "x": 3, "y": 1, "w": 1, "h": 1, "i": "13" }, { "x": 3, "y": 2, "w": 1, "h": 1, "i": "14" }, { "x": 3, "y": 3, "w": 1, "h": 1, "i": "15" }, { "x": 4, "y": 0, "w": 1, "h": 1, "i": "16" }, { "x": 4, "y": 1, "w": 1, "h": 1, "i": "17" }, { "x": 4, "y": 2, "w": 1, "h": 1, "i": "18" }, { "x": 4, "y": 3, "w": 1, "h": 1, "i": "19" } ] }
运行起来之后,页面效果
加上点背景颜色
.vue-grid-item { background: aquamarine; }
此时可以拖拽,可以改变格子大小了。
接下来开始写几个方法,封装一下配置
添加右键事件,以后配置的时候用
html:
<ul class='contextmenu' v-show="menuConfig.visible" :style="{left:menuConfig.left+'px',top:menuConfig.top+'px'}"> <li @click="test(1)">1</li> <li @click="test(2)">2</li> <li @click="test(3)">3</li> </ul>
script:
<data> menuConfig: { visible: false, left: 0, top: 0 } <methods> // 右键打开菜单 openMenu(tag, e) { this.menuConfig.visible = true this.menuConfig.left = e.clientX this.menuConfig.top = e.clientY }, // 关闭菜单 closeMenu() { this.menuConfig.visible = false }, // 测试方法 test(i) { console.log(i) } }, <watch> // 点击任意处,关闭菜单 'menuConfig.visible'() { if (this.menuConfig.visible) { document.body.addEventListener('click', this.closeMenu) } else { document.body.removeEventListener('click', this.closeMenu) } }
style:
.contextmenu { margin: 0; background: #fff; z-index: 100; position: absolute; list-style-type: none; padding: 5px 0; border-radius: 4px; font-size: 12px; font-weight: 400; color: #333; box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); li { margin: 0; padding: 7px 16px; cursor: pointer; &:hover { background: #eee; } } }
- LCA 最近公共祖先
- RMQ问题(线段树算法,ST算法优化)
- 统计0到n之间1的个数[数学,动态规划dp](经典,详解)
- Selenium2+python自动化40-cookie相关操作
- 【干货】PyTorch实例:用ResNet进行交通标志分类
- 2017年浙江理工大学程序设计竞赛校赛 题解&源码(A.水, D. 简单贪心 ,E.数论,I 暴力)
- Selenium2+python自动化41-绕过验证码(add_cookie)
- C语言求最小公倍数和最大公约数三种算法(经典)
- Selenium2+python自动化47-判断弹出框存在(alert_is_present)
- Free Pascal初次体验(有亮点哦)
- HDU 1312 Red and Black(DFS,板子题,详解,零基础教你代码实现DFS)
- Selenium2+python自动化48-登录方法(参数化)
- 51Nod 1003 阶乘后面0的数量(数学,思维题)
- 如何查看某个用户指定时间段的ABAP开发记录
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- js字符串/数组常用方法总结
- ThinkPHP5+mpdf 实现富文本生成 PDF文件
- nodejs使用readline逐行读取和写入文件
- go语言逐行读取和写入文件
- SpringBoot中Tomcat是如何启动的
- 自定义注解详解及应用
- 微服务开源框架TARS 之 框架服务解析
- dotnet 在 UOS 国产系统上使用 Xamarin Forms 创建 xaml 界面的 GTK 应用
- K8s集群上使用Helm部署2.4.6版本Rancher集群
- VMware下安装CentOS
- leetcode多线程之按序打印
- 表格的实现
- 使用 Node.js 定制你的技术雷达:中篇
- 数据库PostrageSQL-在Windows上从源代码安装
- Redis的过期策略和内存淘汰策略及LRU算法详解