低代码-开发记录

用户4199614294546
116 阅读2分钟
  • 目标结果及功能边界：
  1. 纯前端组件
  2. 目标人员是开发人员
  3. 能根据表的数据快速拖拉出一个增删改查页面
  4. 能拖拉出复杂页面，如网站首页
  5. 支持组件嵌套拖动、支持读取组件内的属性、支持细粒度的组件配置
  6. 同时支持加载本地和网络JS/CSS文件，这样本地开发时可以使用idea提供的强大提示功能
  • 技术栈：
  1. vue2、element-ui、Vue.draggable
  • 开发步骤：
  1. 实现一个二行三列页面
  2. 左侧页面组件构思
    1. 左侧页面，布局型组件、表格组件、表单组件、自定义组件4大类组件样式
  3. 中间页面，支持组件渲染和嵌套渲染
    1. 中间页面，接收左侧拖动过来的组件
    2. 中间页面，渲染左侧拖动过来的组件
  4. 中间页面，鼠标移动在组件上时，高亮显示组件边框及组件名称，鼠标点击在组件上时，高亮显示组件边框及，在右侧显示组件属性
  5. 中间页面，点击复制和删除按钮时，实现组件的删除和复制效果
  6. 右侧页面，修改属性能实时修改中间页面的预览效果
  7. 使用localstore实现页面的缓存和编辑
  • 效果：

  1. 实现一个二行三列页面 image.png

  2. 左侧页面组件构思

    1. 左侧页面，添加布局型组件、表格组件、表单组件、自定义组件4大类组件内容及样式 image.png

  3. 中间页面，支持组件渲染和嵌套渲染

    1. 中间页面，接收左侧拖动过来的组件 1.gif

    2. 中间页面，渲染左侧拖动过来的组件 2.3.gif

    3. 中间页面，鼠标移动在组件上时，高亮显示组件边框及组件名称，鼠标点击在组件上时，高亮显示组件边框及，在右侧显示组件属性

    2.4.gif 4. 右侧页面修改属性实时预览，实现复制、删除、前移、后移、变更组件 2.5.gif

avatar
文章
阅读
粉丝