项目场景:
vue中if判断后使用文本编辑器(误区)
问题描述:
在div中使用v-if判断是否显示UEditor富文本编辑器,在判断为true的情况下富文本编辑器并未加载出。
<!-- 判断富文本编辑器是否显示 --><div class="panel" v--if="Id=='487937'"><div style="height: 900px;width:1000px;overflow-y: auto;overflow-x: hidden;padding-left:10px"><div id="editor"></div></div></div>
原因分析:
第一时间去查看created页面加载是否初始化UEditor,以下代码显示已经初始化,并不是这个原因。
created(){ //初始化UEditorthis.editor = window.UE.getEditor('editor', this.editorConfig);}
又想到是否页面初始化完成时,UEditor的初始化未完成导致的,于是把UEditor的初始化放在了mounted中:
mounted() {//初始化UEditorthis.editor = window.UE.getEditor('editor', this.editorConfig);}
然而,并没有什么用,依旧解决问题。
第三次尝试着把富文本的div换一个位置,结果它出来了!!!!
解决方案:
if判断改用动态类设置富文本编辑框的显示和隐藏:
CSS:
.ue-editor {display: block;}.ue-editorHidden {display: none;}
HTML:
//初始化设置编辑器隐藏<div class="ueEditorHidden ue-editorHidden"><div style="height: 900px;width:1000px;overflow-y: auto;overflow-x: hidden;padding-left:10px"><div id="editor"></div></div></div>
JS:
watch:{Id(val){if (val=='487937') {//true:移除隐藏类ue-editorHidden 、添加类ue-editor显示:false:不执行操作$('.ueEditorHidden').removeClass('ue-editorHidden');$('.ueEditorHidden').addClass('ue-editor');}}
我的理解:执行顺序的问题,如果用if判断,则先执行判断,再渲染编辑器,那么编辑器将不能正常渲染