vue-quill-editor富文本编辑器踩坑之禁用/只读无效
vue-quill-editor的使用
·
在使用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;':'' "
模拟只读的样式
更多推荐
已为社区贡献1条内容
所有评论(0)