/h5-editor

一款模仿易企秀制作的编辑器

Primary LanguageVueMIT LicenseMIT

h5-editor

一款仿易企秀的h5编辑器,此项目还在持续开发中。这也是人生中第五个编辑器了，也是第一个使用VUE制作的作品。这里你会学到面向对象编程，设计模式，TDD。博客地址

预览

Install

npm install
npm run mock
打开另一个CMD
npm run start

开发计划

编辑器部分

  • 拖拉拽，旋转，大小，位置
  • 组件单选多选
  • 组件复制，黏贴
  • 组件拖拽过程中自动吸附其他组件
  • 多选组件的情况下，排序对齐。包括左对齐，上对齐，右对齐，下对齐，垂直居中对齐，水平居中对齐，垂直均分，水平均分
  • 组件常用样式编辑，阴影编辑，这里要引入多个UI库，甚至要自己写UI库，有点蛋疼
  • 按钮
  • 属性面板
  • 拖拽指令gls-dragable
  • 页签
  • 手风琴
  • 颜色选择器
  • 滑动条
  • 下拉框
  • 弹出框
  • 单选框
  • 复选框
  • 单行文本框
  • 多行文本框
  • 数字步增
  • tooltip
  • 组件动画编辑
  • 场景编辑
  • 新建场景
  • 删除场景
  • 复制场景
  • 场景拖拽排序
  • 场景名称编辑
  • 增加背景编辑
  • 增加图片组件
  • 增加图片素材管理器
  • 文本双击之后的内容编辑
  • 增加音频组件
  • 增加音频素材管理
  • 吸附效果可视化，可配置化
  • 整合引擎，实现预览
  • 撤销，恢复
  • 实现页面模板

引擎部分

  • 项目内容的读取
  • 读取场景数据并渲染
  • 预加载场景数据
  • 引入swiper实现滑动换页 。。。