问题情景:
编辑器是放在 element-ui 的对话框里的(el-dialog),第一次点开对话框的时候,编辑器可以正常显示代码。但关闭对话框并再次打开之后,编辑器没有显示代码,并且编辑器右边多了一个类似滚动条的东西,此时再点击编辑器区域,才会显示代码。
网上主流的解决办法:
网上大部分都使用了 refresh() 这个函数,但是我用了没有效果,具体用法参见这篇文章。其它地方的贴子可能代码略有不同,但核心都是用 refresh() 。
我的解决办法:
后来在另外的贴子那里看到了这句话:
“原因据说是多个codemirror相互影响导致,但是我只有一个codemirror 的时候也出现这个问题”
于是想到了:可能是因为我这里第一次关闭对话框的时候,codemirror 没有重置,既然 refresh() 没有效果,那不如就直接给对话框设置一个 v-if ,当关闭对话框的时候,v-if 设置为 false,此时对话框这个元素节点就会被清除,当点击显示对话框的时候,v-if 再设置为 true,这样也就变相达到了重置 codemirror 的效果。
具体代码我就不贴了,因为每个人遇到的场景不同,我这里只是把解决思路分享出来。
核心思路就一句话:通过元素节点的删除和重新渲染,达到重置单个 codemirror 的目的。
————————————————————————————————————————————
2023/03/07 更新:
用工作电脑的时候,从别的贴子那里看到的,过后几天才想起来要更新我自己的贴子,原贴也就没保存,惭愧。
想要使 refresh 起作用,需要将其放入 nextTick 中调用,本人亲测有效。将其放入 setTimeout 中调用好像也有效果,这个没测试过。