在使用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;':'' "模拟只读的样式

Logo

前往低代码交流专区

更多推荐