学习进度条

今日所花时间：一小时
今日代码量：100行
博客量：2篇
了解到的知识点：Quill富文本编辑器 路由实现页面跳转
文章内容需要使用到富文本编辑器，这里咱们使用一个开源的富文本编辑器 Quill

官网地址： https://vueup.github.io/vue-quill/

安装：

npm install @vueup/vue-quill@latest --save

导入组件和样式：

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

页面长使用quill组件：

<quill-editor
              theme="snow"
              v-model:content="articleModel.content"
              contentType="html"
              >
</quill-editor>

样式美化：

.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}

路由实现跳转功能
在el-dropdown中有四个子条目，分别是：

• 基本资料
• 更换头像
• 重置密码
• 退出登录

其中其三个起到路由功能，跟左侧菜单中【个人中心】下面的二级菜单是同样的功能，退出登录需要删除本地pinia中存储的token以及userInfo

路由实现：

在el-dropdown-item标签上添加command属性，属性值和路由表中/user/xxx保持一致

<el-dropdown-menu>
    <el-dropdown-item command="info" :icon="User">基本资料</el-dropdown-item>
    <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
    <el-dropdown-item command="password" :icon="EditPen">重置密码</el-dropdown-item>
    <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
</el-dropdown-menu>

在el-dropdown标签上绑定command事件,当有条目被点击后，会触发这个事件

<el-dropdown placement="bottom-end" @command="handleCommand">

提供handleCommand函数，参数为点击条目的command属性值