记录一下工作中遇到的问题。
后台富文本用的是vue-quill-editor,其中表格中有一个回复/查看按钮,共用一个表单组件,但查看时,禁用富文本,回复启用富文本。网上查了下都是禁用富文本,但是禁用过后启用不了,因此做了一些改动, 以下为改动内容。
<quill-editor
class="editor"
:content="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
@ready="onEditorReady($event)"
>
</quill-editor>
props: {
// 是否可以编辑
isDisable: {
type: Boolean,
default: false,
},
},
methods: {
// 富文本准备时的事件
onEditorReady(event) {
this.event = event;
},
},
watch: {
isDisable: {
handler(newVal, oldVal) {
if (!newVal) {
this.$nextTick(() => {
this.event.enable(true);
});
} else {
this.$nextTick(() => {
this.event.enable(false);
});
}
},
//页面初始化时立即执行
immediate: true,
},
},