vue-grid-layout布局

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

code.juejin.cn/pen/7146502…

目录

1. 基础布局
   1. 左中右布局。左右固定宽度。中间自适应。
   2. 左侧存放待拖拽组件
   3. css布局-实现左中右布局的5种方式
      1. 浮动布局 [左浮动, 右浮动, 中间自动填充]
      2. 绝对定位
      3. flex布局
      4. 表格布局
      5. 网格布局
2. 支持拖拽
   1. 静态资源托管
   2. 删除github仓库
   3. 原生js实现拖拽功能基本思路
   4. Sortablejs拖拽
   5. Sortablejs-demo
   6. Vue.Draggable
   7. Vue.Draggable-demo
3. vue-grid-layout组件
   1. vue-grid-layout组件
   2. 支持响应式
   3. 支持添加组件
   4. 支持删除
   5. 支持是否可拖拽

实现

• 基础布局，使用flex布局，已经实现。
• 支持拖拽实现。但是不够完美。后续要重写。
• vue-grid-layout组件。已实现。

思路

实现一个自动构建组件的页面。通过拖拽一些基础组件【按钮、input框】，做对应的属性配置，最后生成一份配置。

1. 目前使用了vue-grid-layout组件做布局。目的是为了更加的灵活。随心所欲的布局。
2. 拖拽的实现用了Vue.Draggable库，算是踩坑了。没有原生的拖拽好处理。并且在项目中使用有点占用资源。后续要重新做掉。

问题

1. 在使用插件实现拖拽和布局的时候，有数据引用的问题。及时发现处理就好了。
2. 在找vue-grid-layout组件cdn地址时，一时没有找到，就查了静态资源托管的方法。在上边留了地址。

总结

路漫漫其修远兮，吾将上下而求索。