项目中的学习感悟

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

我们的项目是一个模仿滴答清单的APP，我负责的是md编辑器的功能，在查找资料以及进行对比之后，我选择的是mavon-editor，他是开源的并且支持vue3的一个组件。

mavon-editor的使用

安装配置

安装npm i mavon-editor@3.0.0-beta

然后直接去更改main.js即可

全功能使用

这是使用的页面，需要实现左边编辑右边预览的功能，这里直接使用的mavon-editor。

在项目代码中提供了开关,便于后续的修改。

                 // 下面是编辑界面使用的
                 content: "这里是markdown编辑的内容\n- 1\n- 2",
                 page_article: undefined,
                 html_content: undefined,
                 md_content: undefined,
                 // 根据需求取舍
                 toolbars: {
                     bold: true, // 粗体
                     italic: true, // 斜体
                     header: true, // 标题
                     underline: true, // 下划线
                     strikethrough: true, // 中划线
                     mark: true, // 标记
                     superscript: true, // 上角标
                     subscript: true, // 下角标
                     quote: true, // 引用
                     ol: true, // 有序列表
                     ul: true, // 无序列表
                     link: true, // 链接
                     imagelink: true, // 图片链接
                     code: true, // code
                     table: true, // 表格
                     fullscreen: true, // 全屏编辑
                     readmodel: true, // 沉浸式阅读
                     htmlcode: true, // 展示html源码
                     help: true, // 帮助
                     undo: true, // 上一步
                     redo: true, // 下一步
                     trash: true, // 清空
                     save: true, // 保存（触发events中的save事件）
                     navigation: true, // 导航目录
                     alignleft: true, // 左对齐
                     aligncenter: true, // 居中
                     alignright: true, // 右对齐
                     subfield: true, // 单双栏模式
                     preview: true // 预览
                 },
                 codeStyle: 'monokai-sublime', //主题
                 test_html: undefined

仅使用预览功能

右侧是实现的仅预览，不可编辑，实际是只使用预览界面，不需要使用的功能直接隐藏就可以

代码实现：

                 <!-- 右盒子是md笔记的预览 -->
                 <mavon-editor 
                 class="mdShow" 
                 v-model="content" 
                 :subfield="false" 
                 :boxShadow="false"
                 :previewBackground="'#ffffff'" 
                 :defaultOpen="'preview'" 
                 :toolbarsFlag="false" 
                 :editable="false"
                 :scrollStyle="true" 
                 :ishljs="true" />

置顶按钮的实现

我负责的功能中还有一个简单的按钮，但是需要实现置顶，这是我没有写过的，原以为十分简单，但实际写出来也让我受益匪浅。

就是左下角的悬浮按钮，需要实现点击之后在同一个页面中切换显示的内容

下面是功能的实现

置顶

 z-index: 9999;

固定位置

 position: absolute;
 left: 1%;
 top: 91%;

样式

 width: 39px;
 height: 39px;
 background: #FFFFFF;
 border-radius: 50%;
 box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);