vue-quill-editor富文本编辑器踩坑之禁用/只读无效

最新推荐文章于 2024-05-28 14:58:21 发布

(￢_￢)575

最新推荐文章于 2024-05-28 14:58:21 发布

阅读量2.3k

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_60563557/article/details/132811311

版权

在使用vue-quill-editor时通过options方式设置readOnly属性无效，使用以下方式禁用

 <div class="edit_container" :class="{ warn_edit_container: warnTextLength}" :style="disabled?'background: #f5f7fa;cursor: not-allowed;':'' ">
    <quill-editor
			v-model="content"
			ref="myQuillEditor"
			:class="getCurrentClass"
			:options="editorOption"
			@blur="onEditorBlur($event)"
			@focus="onEditorFocus($event)"
			@change="onEditorChange($event)"
		/>
    <div class="text_number_tips" :class="{ warn_text_number_tips: warnTextLength }">{{ currentLength }}/{{ maxTextLength }}</div>
  </div>

	props:{
		disabled:{
      		type: Boolean,
     		default: false
    	}
	}，


  methods: {
    onEditorBlur(v) {
      v.enable(!this.disabled)
    }, // 失去焦点事件
    onEditorFocus(v) {
      v.enable(!this.disabled)
    }, // 获得焦点事件
    onEditorChange(v) {
      this.$nextTick(()=>{
        this.$refs.myQuillEditor.quill.blur()
      })
    } // 内容改变事件
  },

详解

该方法可以通过父组件传递disabled属性来控制只读，通过blur、focus、change三个事件来控制是否可以输入，只有focus和blur时间有enable方法，enable方法可以控制输入，最后通过动态style:style="disabled?'background: #f5f7fa;cursor: not-allowed;':'' "模拟只读的样式