## 如何自定义一个元素 我们以【网页元素】为例,来梳理下自定义一个元素的过程。 > 完整代码在 https://github.com/pipipi-pikachu/PPTist/tree/document-demo > 注意:由于版本更新,该文档和仓库中的代码并不是直接复制粘贴就可以使用,这里仅提供思路。 ### 编写新元素的结构与配置 首先需要定义这个元素的结构,并添加该元素类型 ```typescript // types/slides.ts export const enum ElementTypes { TEXT = 'text', IMAGE = 'image', SHAPE = 'shape', LINE = 'line', CHART = 'chart', TABLE = 'table', LATEX = 'latex', VIDEO = 'video', AUDIO = 'audio', FRAME = 'frame', // add } // add export interface PPTFrameElement extends PPTBaseElement { type: 'frame' id: string; left: number; top: number; width: number; height: number; url: string; // 网页链接地址 } // 修改 PPTElement Type export type PPTElement = PPTTextElement | PPTImageElement | PPTShapeElement | PPTLineElement | PPTChartElement | PPTTableElement | PPTLatexElement | PPTVideoElement | PPTAudioElement | PPTFrameElement ``` 在配置文件中添加新元素的中文名,以及最小尺寸: ```typescript // configs/element export const ELEMENT_TYPE_ZH = { text: '文本', image: '图片', shape: '形状', line: '线条', chart: '图表', table: '表格', video: '视频', audio: '音频', frame: '网页', // add } export const MIN_SIZE = { text: 20, image: 20, shape: 15, chart: 200, table: 20, video: 250, audio: 20, frame: 200, // add } ``` ### 编写新元素组件 然后开始编写该元素的组件: ```html handleSelectElement($event)" @touchstart="$event => handleSelectElement($event)" > handleSelectElement($event, false)" @touchstart="$event => handleSelectElement($event, false)" > ``` 此外我们需要另一个不带编辑功能的基础版组件,用于缩略图/放映模式下显示: ```html ``` 在这里你可能会发现,这两个组件非常相似,确实如此,对于比较简单的元素组件来说,可编辑版和不可编辑版是高度一致的,不可编辑版可能仅仅是少了一些方法而已。但是对于比较复杂的元素组件,两者的差异就会比较大了(具体可以比较文本元素和图片元素的两版),因此,你可以自行判断是否将二者合并抽象为一个组件,这里不过多展开。 编写完元素组件,我们需要把它用在需要的地方,具体可能包括: - 缩略图元素组件 `views/components/ThumbnailSlide/ThumbnailElement.vue` - 放映元素组件 `views/Screen/ScreenElement.vue` - 可编辑元素组件 `views/Editor/Canvas/EditableElement.vue` - 移动端可编辑元素组件 `views/Mobile/MobileEditor/MobileEditableElement.vue` 一般来说,前两者使用不可编辑版,后两者使用可编辑版。 这里仅以画布中的可编辑元素组件为例: ```html ``` 在画布的可编辑元素中,还需要为元素添加操作节点 `Operate`(一般包括八个缩放点、四条边线、一个旋转点),对于特殊的元素(如线条的操作节点明显与其他不同)你可以自己编写该组件,但是一般情况下可以直接使用已经编写好的通用操作节点: ```html ``` ### 编写右侧元素编辑面板 接下来需要为元素添加一个样式面板。当选中元素时,右侧工具栏会自动聚焦到该面板,你需要在这里添加一些你认为需要的设置项来操作元素本身,只需要记住一点:修改元素实际是修改元素的数据,也就是最开始定义的结构中的各个字段。 另外,修改元素后不要忘了将操作添加到历史记录。 ```html 网页链接: 确定 ``` ```html ``` ### 创建元素 这是自定义一个新元素的最后一步。首先编写一个创建元素的方法: ```typescript // src\hooks\useCreateElement.ts const createFrameElement = (url: string) => { createElement({ type: 'frame', id: nanoid(10), width: 800, height: 480, rotate: 0, left: (VIEWPORT_SIZE - 800) / 2, top: (VIEWPORT_SIZE * viewportRatio.value - 480) / 2, url, }) } ``` 然后在插入工具栏中使用: ```html 插入网页 ``` 点击【插入网页】按钮,你就会看到一个网页元素被添加到画布中了。 ### 总结 至此就是自定义一个元素的基本流程了。整个过程比较繁琐,但并不复杂,重点在于元素结构的定义与元素组件的编写,这决定了新元素将具备怎样的能力与外表。而其他的部分仅依葫芦画瓢即可。 除此之外,还有一些非必须的调整:比如你希望导出能够支持新元素,则需要在导出相关的方法中进行扩展;比如你希望主题功能能够应用在新元素上,则需要在主题相关的方法中进行扩展,以此类推。