低代码平台-vue-grid-layout配置

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

问题

1. grid-layout高度适应100%；
2. 平台整体配置文件描述；
3. 设置组件的选中状态；
4. 拖拽、调整大小更新json文件；

解决问题

1. grid-layout高度适应100%；

   1. 设置grid-layout的高度；:style="{height:'96vh'}"

      <grid-layout
          :layout.sync="layout"
          :col-num="12"
          :row-height="10"
          :margin="[10, 10]"
          :is-draggable="draggable"
          :is-resizable="resizable"
          :vertical-compact="false"
          :use-css-transforms="true"
          :style="{height:'96vh'}"
        >
          <grid-item
            v-for="item in layout"
            :static="item.static"
            :key="item.i"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :i="item.i"
          >
            <span class="text">{{ itemTitle(item) }}</span>
          </grid-item>
        </grid-layout>
      

   2. 因为设置verticalCompact了属性，所以只能横向拖拽，不能随心所欲的拖拽。解决方法就是将verticalCompact设置为false。

   3. 属性说明

      verticalCompact
      type: Boolean
      required: false
      default: true
      标识布局是否垂直压缩。
      

2. 平台整体配置文件描述；

   1. 布局组件的描述。主要放布局组件的配置文件和样式描述。包含基础组件的根属性。

      this.layoutConfig = {
            layoutId: "",
            x: 0,
            y: 0,
            w: 2,
            h: 2,
            i: "0",
            static: false,
            isDraggable: true,
            isResizable: true,
            render:'grid-layout',
            style:{
              border: "1px solid #000000"
            },
            components: {} //id:{} 组件信息
          };
      

3. 设置组件的选中状态；

   1. 根据渲染组件的id，和拖拽生成记录的组件的id，做对比。一致赋值样式。

      :style="{
      	border: item.i == selectedStyleId ? '2px solid #13ede8' : '',
      }"
      

4. 拖拽、调整大小更新json文件；

   1. 拖拽和调整布局大小，使用的是vue-grid-layout的属性。isDraggable和 isResizable。

   2. isDraggable: 标识栅格元素是否可拖拽。如果值为null则取决于父容器。

      1. type: Boolean
         required: false
         default: null
         

   3. isResizable: 标识栅格元素是否可调整大小。如果值为null则取决于父容器。

      1. type: Boolean
         required: false
         default: null
         

         

总结

上篇文章我们导入了vue-grid-layout。这篇文章我们解决以上4个小问题。 整体思路是：

1. 通过描述文件获取初始化的json文件，主要是初始化的可以显示一个基本的图形。
2. 图形渲染完之后，添加点击事件，设置默认选中的组件标识和索引，目的是为了解决右侧的配置，方便获取配置文件。
3. 通过组件的属性，设置右侧的配置属性，主要是为了展示，方便操作。
4. 右侧改变配置时，通过事件的形式，进行通知json文件的更新，同时更新组件的josn数据。
5. 目前的json数据，暂时保存在localStorage中。