完美解决Vue文本编辑器 vue-quill-editor 和 element-ui 样式冲突造成的小图标样式错乱
前言:使用文本编辑器 vue-quill-editor和 element-ui 样式冲突造成的小图标样式。主要是由于el-form-item组件造成的样式冲突.在不修改源码的基础上,通过赋值一个新类去修改此冲突<template><div><quill-editorclass="ql-edi...
·
前言:使用文本编辑器 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>
更多推荐
已为社区贡献9条内容
所有评论(0)