vue+el-dialog中使用codemirror 遇到的问题_codemirror 从不显示到显示样式问题-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44711316/article/details/121165838

本文介绍了在Vue项目中使用el-dialog弹框集成codemirror编辑器时遇到的四个问题及相应的解决办法。包括代码提示框不显示、jshint检测语法时的遮挡和ES6警告、自定义代码提示以及快捷键格式化JS代码的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注：mode为‘javascript’

在这里插入图片描述

问题一：由于是在el-dialog弹框中使用codemirror,代码提示框不出现
解决方法：由于代码提示框样式的z-index为10 小于el-dailog的z-index；所以可以给代码提示框设置样式

.CodeMirror-hints{
   
    z-index: 3000 !important;
}

问题二：需检测js代码语法格式正确与否；所以安装了jshint
npm i jshint --save ;在main.js 中引入import jshint from “jshint”; window.JSHINT = jshint.JSHINT;
但发现检测提示信息弹框被el-dialog遮挡并且对于es6语法会出现⚠️警告
解决方法：1:给检测提示信息弹框设置样式

.CodeMirror-lint-tooltip{
   
	z-index: 3000 !important;
}

2.解决不支持es6语法的提示

lint:{
   
	esversion: 6
}//在codemirror option配置里 将lint：true改为如上

问题三：想在原有的js代码提示的基础上，新增一些自定义的代码提示
解决方法：
在codemirror option配置里，将hintOptions改为如下

hintOptions: {
   hint: this.handleShowHint, completeSingle: false},

handleShowHint方法如下

//代码提示处理
			handleShowHint(){
   
				const  cmInstance = this.$refs.myCm.codemirror
				let cursor = cmInstance.getCursor(