第一卷：今天学了什么 黑马大事件项目 2022.7.6

1.富文本框

富文本框的内容是加了html和css标签的  具体长下面这样

 使用方法：先下载 nmp i vue-quill-editor 然后在main.js 全局引入

// 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// 导入富文本编辑器的样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

// 全局注册富文本编辑器
Vue.use(VueQuillEditor)

官方网站：基于 vue-quill-editor 实现富文本编辑器：vue-quill-editor - npm

2.::v-deep 与 scoped

遇到的问题：为什么给富文本框用类选择器加样式不行呢？

<el-form-item label="文章内容"  prop="content">
        <!-- 使用 v-model 进行双向的数据绑定 -->
        <quill-editor v-model="pubForm.content"></quill-editor>（我的class是ql-editor）
</el-form-item>

样式里写了scoped 什么是scoped？正常style上加了scope的话, 会给.ql-editor[data-v-hash]属性  会给每一个标签加[data-v-hash]属性 

但是不会给组件标签加[data-v-hash]属性  只给组件根标签加[data-v-hash]属性  所以这里的.ql-editor没有这个属性 也就不会被选中了

解决方法：加::v-deep 穿透选择    加了::v-deep空格前置的话, 选择器就会变成如下形式
// [data-v-hash] .ql-editor 这样就能选中组件内的标签的class类名了

3.接口要求传表单对象

// 创建 FormData 对象
const fd = new FormData()

// 向 FormData 中追加数据
Object.keys(this.pubForm).forEach((key) => {
    fd.append(key, this.pubForm[key])
})

// 发起请求
const { data: res } = await uploadArticleAPI(fd)