/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实现滑动换页 。。。