vue-quill-editor设置disabled

admin管理员组

文章数量:1640592

最近项目用到了vue-quill-editor，但是有场景要给富文本编辑器添加disabled效果，查看官网api后得到以下解决方案，直接上代码

html：

<template>
    <div 
        class="my-editor-comp">
        <quill-editor 
            :class="[disabled ? 'is-disabled' : '']"
            v-model="content" 
            ref="myQuillEditor" 
            :options="options" 
            @focus="onFocus($event)"
            @blur="onBlur($event)">
        </quill-editor>
    </div>
</template>

js：

<script>
// 添加富文本编辑器require配置
import { quillEditor } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
    name: 'MyEditor',
    components: {
        quillEditor
    },
    data(){
        return{
            // 是否显示按钮
            disabled: false,
            // 富文本内容
            content: "",
            // 富文本配置
            options: {
                modules: {
                    toolbar: {
                        container: [
                            ['bold','italic','underline','strike'],
                            [{'size':['small', false, 'large', 'huge']}],
                            [{ 'color' : [] }, { 'background' : [] }],
                            [{ 'font' : [] }],
                            [{ 'align' : [] }],
                            ['link', 'image'],
                        ],
                    }               
                },
                placeholder: "请输入",
            },
        }
    },
    methods: {
        /** 
         * @method 鼠标进入
        */
        onMouseover(){
            if(this.disabled){
                this.$refs.myQuillEditor.quill.enable(false);
            }
        },
        /** 
         * @method 鼠标离开
        */
        onMouseleave(){
            if(this.disabled){
                this.$refs.myQuillEditor.quill.enable(true);
            }
        },
    }
}
</script>

实现核心：

富文本的enable方法，官网解释如下

本文标签： quillvuedisabledEditor