将vue-quill-editor封装，使用封装的readOnly参数，实现vue中editor的动态只读

1. 创建一个名为`QuillEditor`的Vue组件，用于封装`vue-quill-editor`组件。

<template>
  <div>
    <quill-editor v-model="content" :options="editorOptions"></quill-editor>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor';

export default {
  components: {
    quillEditor,
  },
  props: {
    readOnly: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      content: '',
      editorOptions: {
        readOnly: this.readOnly,
      },
    };
  },
  watch: {
    readOnly(newVal) {
      this.editorOptions.readOnly = newVal;
    },
  },
};
</script>

2. 在组件中，添加一个名为`readOnly`的prop，用于接收父组件传递的只读状态。在组件内部，通过`editorOptions`对象将只读状态传递给`vue-quill-editor`组件。在`readOnly`属性发生变化时，通过`watch`监听器，更新`editorOptions`对象中的只读状态。

3. 在父组件中，使用`QuillEditor`组件，并通过`readOnly`属性控制是否只读。

<template>
  <div>
    <QuillEditor :readOnly="isReadOnly"></QuillEditor>
    <button @click="toggleReadOnly">Toggle ReadOnly</button>
  </div>
</template>

<script>
import QuillEditor from './QuillEditor.vue';

export default {
  components: {
    QuillEditor,
  },
  data() {
    return {
      isReadOnly: false,
    };
  },
  methods: {
    toggleReadOnly() {
      this.isReadOnly = !this.isReadOnly;
    },
  },
};
</script>

4. 在父组件中，通过`isReadOnly`变量控制`QuillEditor`组件的只读状态。在点击`Toggle ReadOnly`按钮时，通过`toggleReadOnly`方法切换只读状态。