electron 实战 pdf_手把手教你Electron + Vue实战教程（三）

作者：Sufen

转发链接：https://mp.weixin.qq.com/s/RkKNMNEaV0Hrp8iQ9MaX0A

目录

手把手教你Electron + Vue实战教程(一)

手把手教你Electron + Vue实战教程(二)

手把手教你Electron + Vue实战教程(三)本篇

手把手教你Electron + Vue实战教程(四)

❝

上一篇我们已经完成了左侧菜单栏的基本样式功能，这一篇我们就主要来开发右侧的Markdown编辑区域，即文件编辑组件FileEdit

❞

需求分析

有道云笔记截图

我们从截图里可以看到，右侧区域主要是由标题栏和内容编辑区组成，其中标题栏的右侧还包含了一排操作按钮，在这里我们就先把这一排按钮忽略了，先把主要功能开发完毕再考虑迭代优化。

所以我们的最终需要实现的需求其实很简单，就是「标题栏 + Markdown编辑区 = 右侧区域」，标题栏支持修改输入，Markdown区支持编辑操作和预览模式，同时也支持单栏和双栏切换，当然还有必不可少的全屏操作。

FileEdit组件开发

我们先在组件目录components下新建组件FileEdit，组件分为上下两部分：

    // 标题区域    // 编辑区  

组件的顶部直接使用element组件el-input，我们需要稍微修改一点样式:

  .file-title {    padding-left: 5px;    height: 56px;    line-height: 56px;    font-size: 18px;    font-weight: 500;    /deep/ .el-input__inner {      height: inherit;      line-height: inherit;      font-weight: inherit;      border: none;    }  }

mavon-editor

Markdown的编辑区，我们可以直接选用第三方的插件包mavon-edito，3.9k star也算是比较火的一个开源Markdown编辑器了，详细