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)