前言:使用文本编辑器 vue-quill-editor 和 element-ui 样式冲突造成的小图标样式。主要是由于el-form-item组件造成的样式冲突.

在不修改源码的基础上,通过赋值一个新类去修改此冲突


<template>
    <div>
        <quill-editor
             class="ql-editor-class"
             ref="myQuillEditor"
        >
        </quill-editor>
    </div>
</template>

<script>
    import { quillEditor } from 'vue-quill-editor'
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
</script>

<style type="text/less"  lang="less" scoped>
    .ql-editor-class {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        line-height: 1.42;
        height: 100%;
        outline: none;
        padding: 0 !important;
        tab-size: 4;
        -moz-tab-size: 4;
        text-align: left;
        word-wrap: break-word;
    }
</style>

 

Logo

前往低代码交流专区

更多推荐