vue-quill-editor禁止编辑
查询解决方案基本是这样的<quilleditor@focus="quillEditorFocus($event)">quillEditorFocus(event) {event.enable(false);},也就是绑定“focus”事件,并调用enable传递false这样有两个问题:1.不够灵活,针对单独封装出来的富文本肯定更希望可以灵活控制是否可以编辑;2.解决不了富文本中已经有
·
查询解决方案基本是这样的
<quilleditor
@focus="quillEditorFocus($event)"
>
quillEditorFocus(event) {
event.enable(false);
},
也就是绑定“focus”事件,并调用enable传递false
这样有两个问题:
1.不够灵活,针对单独封装出来的富文本肯定更希望可以灵活控制是否可以编辑;
2.解决不了富文本中已经有内容的情况;
稍作修改后的方案:
在使用组件时
<Vquill
:isDisable="true"
/>
在富文本组件中
<quilleditor
@change="onChange($event)"
@focus="quillEditorFocus($event)"
>
<script>
export default {
props: {
isDisable: {
type: Boolean,
default: false
}
},
methods: {
quillEditorFocus(event) {
if (this.isDisable) {
event.enable(false);
}
},
onChange(event) {
if (this.isDisable) {
event.quill.enable(false);
} else {
this.$emit("input", this.content);
}
},
}
}
</script>
解决了富文本中已经有内容时操作是否可以编辑;
更多推荐
所有评论(0)