codemirror编辑器必须点击一下输入区域,代码才能正常显示的问题

问题情景:

编辑器是放在 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 中调用好像也有效果,这个没测试过。

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-codemirror是一个基于Vue.js的代码编辑器组件,提供了一个用户友好的界面和丰富的功能来编辑各种编程语言的代码。引用中的内容是Vue-codemirror组件的一些属性和配置选项。 其中,value属性用于设置编辑器的初始内容,可以是代码字符串或者是从服务器加载的代码文件。这样可以在编辑器显示已有的代码。 Mode属性用于设置编译器的编程语言关联内容,通过引入对应的模块或包,使得编辑器能够识别和高亮显示特定编程语言的语法。 Theme属性用于设置编辑器的主题,可以选择不同的主题样式来满足用户的个性化需求。 tabSize属性用于设置tab的空格宽度,可以根据用户的喜好和项目要求来调整。 lineNumbers属性用于决定是否在编辑器显示行号,方便用户进行代码的定位和调试。 smartIndent属性用于控制自动缩进的开关,当该选项打开时,编辑器会根据上一行的缩进自动调整下一行的缩进。 indentUnit属性用于设置缩进的单位,可以是空格或者制表符,根据项目的要求来进行设置。 keyMap属性用于设置快捷键,可以自定义或选择预设的快捷键方案,以提高代码编辑的效率。 通过配置这些属性和选项,可以使得vue-codemirror代码编辑器满足不同开发需求,并提供良好的编码体验。<span class="em">1</span> #### 引用[.reference_title] - *1* [vue codemirror 代码编辑器](https://blog.csdn.net/qq_42181155/article/details/121253626)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值