【PPTist】开源PPT编辑器初体验

一棵开花的树，枝芽无限靠近你2024-11-21 19:56

前言：PPTist 是一款基于 Vue3.x + TypeScript 构建的开源的PPT在线编辑器，功能很齐全，体验感很好，下载运行也很方便，没有奇奇怪怪的报错，分享给大家，以后可能会出系列！

下载运行就不说了，很简单方便，而且没有报错。

界面很简洁美观

另外项目目录也比较清晰，就是传统的 Vue3 项目。学习一个开源项目，最好的学习方式是从某一个功能入手，这一篇咱们就来看一个简单的功能吧，就是【添加幻灯片】功能。

先全局搜索一下 "添加幻灯片"

在src/views/Editor/Thumbnails/index.vue 文件中，点击按钮的时候会触发 src/hooks/useSlideHandler.ts 中的 createSlide 方法，用来创建一个空白页并添加到下一页。

javascript 复制代码

// 创建一页空白页并添加到下一页
const createSlide = () => {
  const emptySlide: Slide = {
    id: nanoid(10), // 10位随机数作为幻灯片ID
    elements: [],
    background: {
      type: 'solid',
      color: theme.value.backgroundColor,
    },
  }
  // 创建新页面后，将当前选中元素ID列表清空
  mainStore.setActiveElementIdList([])
  // 添加新页面
  slidesStore.addSlide(emptySlide)
  // 添加快照
  addHistorySnapshot()
}

src/store/slides.ts

javascript 复制代码

addSlide(slide: Slide | Slide[]) {
  const slides = Array.isArray(slide) ? slide : [slide]
  for (const slide of slides) {
    if (slide.sectionTag) delete slide.sectionTag
  }

  // 将新页面添加到当前页面之后
  const addIndex = this.slideIndex + 1
  this.slides.splice(addIndex, 0, ...slides)
  this.slideIndex = addIndex
},

可以看到幻灯片其实是一个数组，逻辑还挺容易看懂的。

然后幻灯片的展示使用的是 Draggable 组件，这个组件是第三方的依赖

javascript 复制代码

import Draggable from 'vuedraggable'

vuedraggable

另外存储数据使用的是 pinia

卡哇伊的标志

寓意着store中可以存储着多个对象，但是它们的根部又紧密相连~~~~~~