处理工具栏隐藏功能,隐藏工具栏失效问题解决

dev_2022-05-11
e 3 years ago
parent d24bcf3129
commit fbdb2d08e4
  1. 27
      src/components/quill/index.vue

@ -1,5 +1,5 @@
<template>
<div class="quill" :class="classes">
<div class="quill" ref="quill" :class="classes">
<div ref="editor" :style="styles" v-loading="loading"></div>
<el-upload :action="this.api.fileupload" :before-upload="beforeUpload" :on-success="editorUploadSuccess" style="display: none">
@ -40,6 +40,10 @@
minHeight: {
type: Number
},
/*
* 原本的readOnly失效,对比其他项目发现是quill版本不同导致
* 使用props传入elseRead = 'true'手动隐藏工具栏
*/
elseRead:{
type:String,default:'false'
}
@ -107,13 +111,17 @@
}
},
created(){
console.log(this.elseRead,'elseRead');
console.log(this.readonly,'readonly');
console.log(this.value,'value');
},
mounted () {
this.init();
//
if(this.elseRead==='true'){
let children = this.$refs.quill.children[0].style
children.padding = '0'
children.overflow = 'hidden'
children.height = '0'
children.borderTop = '0'
}
},
beforeDestroy () {
//
@ -186,4 +194,13 @@
border: none;
}
}
.else{
.ql-toolbar.ql-snow{
height: 0;
overflow: hidden;
padding: 0;
border-top: 0;
}
}
</style>

Loading…
Cancel
Save