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

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

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

界面很简洁美观

另外项目目录也比较清晰，就是传统的 Vue3 项目。学习一个开源项目，最好的学习方式是从某一个功能入手，这一篇咱们就来看一个简单的功能吧，就是【添加幻灯片】功能。
先全局搜索一下 “添加幻灯片”
在src/views/Editor/Thumbnails/index.vue 文件中，点击按钮的时候会触发 src/hooks/useSlideHandler.ts 中的 createSlide 方法，用来创建一个空白页并添加到下一页。

// 创建一页空白页并添加到下一页
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

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 组件，这个组件是第三方的依赖

import Draggable from 'vuedraggable'

vuedraggable

另外存储数据使用的是 pinia
卡哇伊的标志

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

原文地址：https://blog.csdn.net/weixin_45855469/article/details/143907128

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！