vue3 富文本quill

安装

npm install @vueup/vue-quill@latest --save

子组件引入使用

<template>
    <QuillEditor ref="QuillEditorRef" :options="options" :content="textarea" content-type="html"
        @update:content="textChange" />
</template>
<script setup>
import {
    QuillEditor
} from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { getCurrentInstance, onMounted, onUnmounted, ref, defineEmits } from "vue";
const options = ref({

    debug: 'info',
    modules: {
        // toolbar: ['bold', 'italic', 'underline'],
    },
    placeholder: '请输入需要的内容',
    readOnly: false,
    theme: 'snow',
}
)
const Emits = defineEmits()
const textarea = ref()
const timer = ref()
const textChange = (e) => {
    if (timer.value) {
        clearTimeout(timer.value)
    } // 每次进来的时候都将之前的清除掉，如果还没到 600毫秒(600毫秒自定义) 的时候就将之前的清除掉，这样就不会触发之前setTimeout绑定的事件， 如果超过 600豪秒，之前的事件就会被触发下次进来的时候同样清除之前的timer
    time