这是我参与「第四届青训营 」笔记创作活动的的第8天

技术栈

Vite+React+TS+@reduxjs/toolkit+Git+格式化代码配置

布局

1. 三栏布局，左侧组件库，中间菜单和视图，右侧操作栏

2. 自适应：vw/vh， 由于时间问题，布局的css样式采用了vw/vh，其他的未做自适应。

组件库

1. 自定义组件

   1. 每个组件统一暴露propValue用于传参

2. 拖拽

   1. 组件在画布中移动

      • dragstart事件拖拽组件传递给画布

      • 添加draggable属性设置可拖拽

        • dataTransfer.setData()传递数据

      • drop事件 画布收集拖拽组件信息

      • 从所有拖动事件 drag events 的 dataTransfer 属性上获取。

• 数据传输

• • 使用React-redux相关工具链构建仓库
  • 由于改写了setData，所以用store传递setData的时候，在组件内部获取对应的dispatch

• 组件数据修改

• • 在右侧操作栏中，调用修改数据的方法，修改属性，传入仓库，重新渲染。

功能

可以自定义多种功能，支持常用组件、表格，视频、音频等操作。

也可根据需要，自行编写相关组件。

Redux 改写

1. Editor 组件包含整个页面，将data传入该组件

2. 多个组件用到了setData，但是处理方法不一致，所以分别dispatch传入对应的组件

3. 如果组件本身有接收参数，那需要把参数传入dispatch中

4. reducer接收两个参数，state和aciton，自己的参数当成action来传

\

逻辑

1. 拖拽新增组件：获取鼠标属性，在仓库中新增记录

2. 选中移动组件：修改选中的block的属性，移动后重新渲染

\

\