lazycoder

have a try

说明

• h5 端 psd 文件宽度限定只能是 750px，所有切出的图片均保持原大小

• 必须给画布一个高度，此高度等于 psd 文件中整幅图片的高度

• 所有图片大小均不可调整，如需调整，请修改 psd

• 除背景图外的所有元件均采用绝对定位，坐标全部采用百分比，以满足适配的需要

• 所有编辑区内容均为元件，包括背景图、图片、文本、容器和组件，每个元件实质是一个 js 对象

• 页面可视为一个特殊元件，它背后也对应一个 js 对象

• 元件可以被选中，被选中的对象会被设置到 state->activeElement，参数面板根据 activeElement 自动更新

• 图片和文本这两种元件可以添加到容器中，操作方法：

  • 点击左侧工具栏，添加容器，然后在 style 面板给该容器命名
  • 选中图片或文本元件，在 style 面板设置元件所属容器

• 元件要么属于页面，要么属于容器，必在二者之一

• 属于页面的、除背景图以外的元件均可以用鼠标移动，属于容器的元件只可被选中，不可用鼠标移动

• 双击图片可以重新上传替换原图

• 双击文本元件进入编辑模式

• 按 delete 键，可以删除当前选中元件

• 按 Ctrl + C，可以复制当前选中元件

• 点右上角图标，也可对选中元件进行复制与删除操作

• 点击顶部中央按钮，勾选要复制哪几部分代码，点击确定，lazycoder 会生成相应的格式化代码，并复制到剪贴板

项目结构

src |-- assets 公共资源 |-- components 页面组件 |-- elements |-- factory 用于生成最终代码 |-- navbar 导航栏 |-- panel 右侧面板 |-- toolbar 左侧菜单 |-- viewport 中部编辑区 |-- popbox.vue 弹框 | 全局 |-- slider.vue 滑动条 | 全局 |-- toast.vue 提示 | 全局 |-- uploader.vue 上传图片组件 | 全局 |-- mixins 公共抽象类 |-- store 数据管理 |-- utils 公共函数 |-- App.vue 根组件，用于定义页面结构、全局组件、全局样式 |-- main.js 入口文件

关键逻辑

1、选中元件 选中元件（activeElement）是一个核心数据，任何时刻都必须有、且只有一个选中元件 页面视区统一代理监听 mousedown 事件，在事件处理程序中识别目标节点（event.target）的 data-type 属性 该属性的值是元件类型，属性存在，则向 store 提交选中元件操作，不存在，则向 store 提交选中页面操作 具体参见 /components/viewport/index.vue
某些元件节点存在子节点（如文本元件），子节点是 H5 文档编辑模式自动添加的，这意味着鼠标点中这些子节点时，上述代理无法识别目标节点的 data-type，导致文本元件无法选中。解决方案是在文本元件父节点以阻止冒泡的形式监听 mousedown，并重写 handleSelection 方法
2、拖拽元件 由于鼠标点中元件后紧接着的操作可能是拖拽，因此在执行选中元件的同时会绑定拖拽相关的操作，这些操作写在了 mixins 中，这样无论是页面视区统一代理，还是元件中重写的选中逻辑，都可以调用同一份代码，而不是将同样的代码又复制一份。重复代码一定是极力避免的。