查询解决方案基本是这样的

<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>

解决了富文本中已经有内容时操作是否可以编辑;

Logo

前往低代码交流专区

更多推荐