vue定制化桌面开发
最近因项目需求,需要开发一个可以拖拽布局的功能。本人刚接触vue不久,但已经被其强大的功能所吸引,再加上vue的组件化思想很契合项目需求,所以决定使用vue开发。网上搜索vue实现拖拽布局的插件许多,最后选择了容易上手的vue-grid-layout插件,废话太多了,开始整干货。
github地址:vue-grid-layout
首先安装插件
npm install vue-grid-layout --save
然后在页面中引入
import VueGridLayout from 'vue-grid-layout'
const grid-layout = VueGridLayout.GridLayout
const grid-item = VueGridLayout.GridItem
grid-layou代表布局区域,和栅格系统差不多,主要有两个属性需要关注:col-num代表栅格的列数 ,row-height代表每一行的高度。其余的属性可更加文档自行查看。
grid-item代表区域中的每一个元素,主要的属性有五个:x标识元素位于第几列,y标识元素位于第几行,w代表元素的初始宽度,也就数占了几列, h 代表元素的初始高度度,也就数占了几行,i为每个元素的id。
因为想要实现一个左侧展示可选组件,右侧进行拖拽布局的功能,先看一下效果
思路是引入两个grid-layout,左侧的只放组件,右侧的负责最终布局,点击左侧的组件可以添加到右侧的窗体区,双击右侧的组件进行删除。所以需要两个json文件,一个resourcesdata.json存储组件信息,一个layoutdata.json存储布局信息。
resourcesdata.json
[{"x": 0,"y": 0,"w": 12,"h": 2,"i": 0,"Component": "barChart","IsResource": true},{"x": 0,"y": 0,"w": 12,"h": 2,"i": 2,"Component": "lineChart","IsResource": true},{"x": 0,"y": 0,"w": 12,"h": 2,"i": 3,"Component": "parChart","IsResource": true},{"x": 0,"y": 0,"w": 12,"h": 2,"i": 4,"Component": "mapChart","IsResource": true},{"x": 0,"y": 0,"w": 12,"h": 2,"i": 5,"Component": "borderChart","IsResource": true}
]
layoutdata.json
[{"x":0,"y":0,"w":2,"h":2,"i":0,"Component":"borderChart","IsResource":true,"moved":false},{"x":2,"y":0,"w":2,"h":2,"i":1,"Component":"borderChart","IsResource":true,"moved":false},{"x":4,"y":0,"w":2,"h":2,"i":2,"Component":"borderChart","IsResource":true,"moved":false},{"x":6,"y":0,"w":2,"h":2,"i":3,"Component":"borderChart","IsResource":true,"moved":false},{"x":8,"y":0,"w":2,"h":2,"i":4,"Component":"borderChart","IsResource":true,"moved":false},{"x":10,"y":0,"w":2,"h":2,"i":5,"Component":"borderChart","IsResource":true,"moved":false},{"x":0,"y":2,"w":2,"h":2,"i":6,"Component":"borderChart","IsResource":true,"moved":false},{"x":2,"y":2,"w":2,"h":2,"i":7,"Component":"borderChart","IsResource":true,"moved":false},{"x":4,"y":2,"w":2,"h":2,"i":8,"Component":"borderChart","IsResource":true,"moved":false},{"x":6,"y":2,"w":2,"h":2,"i":9,"Component":"borderChart","IsResource":true,"moved":false},{"x":8,"y":2,"w":2,"h":2,"i":10,"Component":"borderChart","IsResource":true,"moved":false},{"x":10,"y":2,"w":2,"h":2,"i":11,"Component":"borderChart","IsResource":true,"moved":false},{"x":0,"y":4,"w":2,"h":2,"i":12,"Component":"borderChart","IsResource":true,"moved":false},{"x":2,"y":4,"w":2,"h":2,"i":13,"Component":"borderChart","IsResource":true,"moved":false}]
两个数据格式基本一致,增加量Component属性代表自定义组件的名称,使用for循环构建组件。
组件区代码
<el-card class="box-card" style='background: none;'><div slot="header" class="clearfix"><span>组件区(单击添加)</span></div><el-scrollbar style="height:75vh"><grid-layout :layout="ResourceData" :col-num="colNum" :row-height="rowHeight" :is-draggable="isDraggable" :is-resizable="false" :is-mirrored="false" :vertical-compact="true" :margin="margin" :use-css-transforms="true"><grid-item v-for="(item) in ResourceData" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="'rescomp'+item.i" @resize="resizeHandler" @move="moveHandler" @resized="resizedHandler" @moved="movedHandler"><!-- 根据组件名动态加载组件 --><div :data-comp="item.Component" @click="addItem(item.Component,2,2)"><el-card shadow="hover" class="" style="width: 100%;height:100%"><component :is="item.Component" :height="item.h* rowHeight+'px'"></component></el-card></div></grid-item></grid-layout></el-scrollbar></el-card>
窗体区代码
<el-card class="box-card" style='background: none;'><div slot="header" class="clearfix"><span>窗体区(高度超出蓝色线框生成的页面将会产生滚动条)</span><el-button @click="saveLayout" style="float: right; padding: 3px 0" type="text">保存布局</el-button><!-- <a @click="saveLayout" href="">保存布局</a> --></div><el-scrollbar style="height:74.4vh" ref="card"><grid-layout :maxRows="6" :layout="layoutData" :col-num="colNum" :row-height="rowHeight" :is-draggable="isDraggable" :is-resizable="isResizable" :is-mirrored="false" :vertical-compact="true" :margin="margin" :use-css-transforms="true" @layout-updated="layoutUpdatedHandler"><grid-item v-for="(item) in layoutData" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="'comp'+item.i"><!-- 根据组件名动态加载组件 --><div @dblclick="deleteItem(item.i)"><el-card shadow="hover" class="" style="width: 100%;height:100%"><component :is="item.Component" :height="item.h*rowHeight+5+'px'"></component></el-card></div></grid-item></grid-layout></el-scrollbar></el-card>
没时间了,先放一下最终效果,后期继续更新
以下为相关参考,感谢分享
vue-grid-layout空白处动态添加组件
https://segmentfault.com/a/1190000020748297
监听div尺寸变化echarts自适应
https://blog.csdn.net/csl125/article/details/89245267
node后台搭建
https://blog.csdn.net/weixin_42416812/article/details/100031977
vue定制化桌面开发相关推荐
- Vue组件化编程开发
目录 一.模块 二.组件 (快捷键< + v + 回车 生成单组件模板) 三.非单文件组件 四.单文件组件: 首先理解模块和组件的基本概念: 一.模块 1.理解:向外提供特定功能的js程序,一般 ...
- go环境搭建_容器化 Go 开发环境的尝试
Go语言中文网,致力于每日分享编码知识,欢迎关注我,会有意想不到的收获! 01 写在前面 昨天上午"起早"到附近的影院看<波西米亚狂想曲>,选的座位比较靠前,最后的二十 ...
- vue项目中动态创建模块以满足客户定制化需求的解决方案
前端项目中很多时候会遇到这样的业务需求: 所有的客户都有共同的一些业务需求,即基础需求 基础需求需要根据业务发展进行升级 在共同需求的基础上,每个客户又有不同的需求(客制化) 如果只是一两个客户还好, ...
- spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
- 技术干货 | Native 页面下如何实现导航栏的定制化开发?
简介:通过不同实际场景的描述,供大家参考完成 Native 页面的定制化开发. 很多 mPaaS Coder 在接入 H5 容器后都会对容器的导航栏进行深度定制,本文旨在通过不同实际场景的描述,供大家 ...
- linux安装定制添加输入,Arch Linux--定制自己的Linux操作系統(乙-國際化桌面安裝篇)...
Arch Linux--定制自己的Linux操作系統 ----乙-國際化&桌面安裝篇 相信大家看了<甲-安裝篇>之後,Arch Linux系統已經可以正常運行了吧?不過,Arch ...
- 高度可定制化的方案_如何开发高度可定制的产品
高度可定制化的方案 您是否听说过:"我们非常喜欢您的产品--除了一些小细节."? 然后,CIO推出了一系列其他"必备"要求的清单,其中有数百个要添加到您的惊人产 ...
- 三、Vue组件化开发学习笔记——组件化的基本步骤、全局组件和局部组件、父组件和子组件、注册组件的语法糖、模板分离写法、组件的数据存放
一.什么是组件化? 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的 所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题 ...
- AI应用开发实战系列之四 - 定制化视觉服务的使用
AI应用开发实战 - 定制化视觉服务的使用 本篇教程的目标是学会使用定制化视觉服务,并能在UWP应用中集成定制化视觉服务模型. 前一篇:AI应用开发实战 - 手写识别应用入门 建议和反馈,请发送到 h ...
最新文章
- 面对新型肺炎疫情,AI能做什么?
- 强大的 IDEA 代码生成
- ClassNotFoundException和NoClassDefFoundError的区别
- 首届中国服务创新大会在深举办 助力产业智慧升级
- callablestatement存储过程
- WINDOWS SERVER 2003 R2 AD域控安装过程实践
- 公钥与私钥,数字签名
- 使用Palette来对图片进行颜色提取
- Ubuntu完美安装QQ
- 考试日复习【字符串处理函数】
- qt_翻译文件常用缩写
- Pr对图像元素进行裁剪
- 另一个伊甸国际服节奏榜(以下全为个人观点,仅供参考
- 多文件自平衡云传输(四)资源发送端 —————— 开开开山怪
- 【论文笔记】Expanding holographic embeddings for knowledge completion
- 华为数通笔记-NDP原理
- 零基础大数据应该学什么
- line-height的理解
- 犹太富翁是怎样培养小富翁的?(永远的经典)
- 2023年第十四届蓝桥杯JAVA B组题目
热门文章
- 考研:研究生考试(十五天学完)之研究生学霸重点知识点总结之考研必知(考研时间/科目/必备物件)、【考研政治】/【考研英语】/【考研数学】经验总结(历年规律分析、技巧总结、经验分享)
- 【课件制作软件】Focusky教程 | 关于FS字体的部分问题总汇以及解决办法
- Android Studio patch使用
- 北大数学韦神又热搜了!随手帮6个博士解决难题:困扰4个月,韦神仅用一天...
- 花园植物花卉高清照片合集 Garden photo Pack
- 雷达系列论文翻译(一):Least-Squares Fitting of Two 3-D Point Sets
- 免费的瑞星2008杀毒软件!
- 管理员已阻止你运行此应用有关详细信息请与管理员联系,怎么办,WIN10
- JavaWeb——JavaScript基础(三)
- typescript官方中文文档,typescript是什么意思