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