『VUE』vue-quill-editor设置内容不可编辑（详细图文注释）

目录

• • 预览
  • 思路
  • 调用代码
  • [借助Props添加isDisable属性控制 是否内容可编辑](#借助Props添加isDisable属性控制 是否内容可编辑)
  • 总结

---

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中

预览

思路

禁用焦点事件和内容改变事件

调用代码

      <quillEditor
              class="editor"
              :class="[size]"
              v-model="content"
              ref="myQuillEditor"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @change="onEditorChange($event)">
      </quillEditor>

---

借助Props添加isDisable属性控制 是否内容可编辑

props: {
      isDisable: {
        type: Boolean,
        default: false
      },

onEditorFocus(editor) {
        if (this.isDisable) {
          editor.enable(false);
        } else {
          //获得焦点事件后你原本要做的操作
        }
      },
      onEditorChange(editor) {
        if (this.isDisable) {
          editor.quill.enable(false);
        } else {
          //内容改变时间后 你原本进行的操作
        }
      },

---

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2024 mzh

Crated：2024-3-1

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中
『未完待续』

---