The problem encountered when using codemirror in vue+el-dialog, there is no code prompt

​Question 1: When using codemirror in the el-dialog popup box, the code prompt box does not appear

Solution: Since the z-index of the code prompt box style is 10, which is smaller than the z-index of el-dailog; so you can set the style for the code prompt box. Note that if you use the scss style, remember not to add the scope attribute, otherwise it may not take effect. Or use vue style intrusion

<style lang="scss">
.CodeMirror-hints{
    z-index: 30000 !important;
}
</style>

Question 2: It is necessary to check whether the syntax of the js code is correct or not; so jshint npm i jshint --save is installed; import jshint from “jshint” is introduced in main.js; window.JSHINT = jshint.JSHINT; but the detection prompt message is found The bullet box is blocked by el-dialog and there will be a ⚠ warning for es6 syntax

Solution:

1: Set the style for the detection prompt information pop-up box 

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

2. Solve the prompt that does not support es6 syntax

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

Question 3 : I want to add some custom code hints on the basis of the original js code hints
Solution :
In the codemirror option configuration, change the hintOptions to the following

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

The handleShowHint method is as follows:

//代码提示处理
			handleShowHint(){
				const  cmInstance = this.$refs.myCm.codemirror
				let cursor = cmInstance.getCursor();// 得到光标
				let curLine = cmInstance.getLine(cursor.line);// 得到行内容
				const jshint = CodeMirror.hint.javascript(cmInstance,this.cmOptions)//获取js自带的提示（cmOptions是codemirror的option配置）
				const anyhint = CodeMirror.hint.anyword(cmInstance,this.cmOptions)//获取anyword自带提示
				const definehint = [
					    "callback()",
						"unique()",
						"many()",
						"log"		
				] // 自定义提示
				var word = /[\w$]+/;
				var end = cursor.ch, start = end;
				while (start && word.test(curLine.charAt(start - 1))) --start;
				var curWord = start != end && curLine.slice(start, end);//此处为了解决防止curLine中有\t、空格而导致匹配不成功的情况
				let found = [];
				function maybeAdd(str) {
					if (str.lastIndexOf(curWord, 0) == 0 && !arrayContains(found, str)) 
					found.push(str);
				}
				forEach(definehint,maybeAdd);
				
				function arrayContains(arr, item) {
					if (!Array.prototype.indexOf) {
					var i = arr.length;
					while (i--) {
						if (arr[i] === item) {
						return true;
						}
					}
					return false;
					}
					return arr.indexOf(item) != -1;
				}
				
				function forEach(arr, f) {
					for (var i = 0, e = arr.length; i < e; ++i) f(arr[i]);
				}
				const words = new Set([...found,...anyhint.list,...jshint.list])//合并所有提示
				if(words.size >0){
					return {
						list: Array.from(words), 
						from: jshint.from, 
						to: jshint.to
					}
				}
			}
	    }

 Question 4 : Implement shortcut keys to format js code

//安装js代码格式化插件
npm i js-beautify --save

//在需要的页面引入
import {js_beautify} from 'js-beautify';

//
extraKeys: {
	"Ctrl-Alt-L":(cm)=>{//自定义格式化代码的快捷键为“Ctrl-Alt-L”
		this.editorValue = js_beautify(cm.getValue());
		this.$emit('onChangeCode',js_beautify(cm.getValue()));
	}
},