vue+el-dialog で codemirror を使用するときに問題が発生しました。コード プロンプトが表示されません

質問 1: el-dialog ポップアップ ボックスで codemirror を使用すると、コード プロンプト ボックスが表示されません

解決策: コード プロンプト ボックス スタイルの z-index は 10 であり、el-dailog の z-index より小さいため、コード プロンプト ボックスのスタイルを設定できます。scss スタイルを使用する場合は、有効にならない可能性があるため、必ずscope属性を追加しないでください。または、vueスタイルの侵入を使用してください。

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

質問 2: js コードの構文が正しいかどうかを確認する必要があるため、 jshint npm i jshint --save がインストールされている; main.js に「jshint」からの import 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改为如上

質問 3 : 元の JS コード ヒントに基づいてカスタム コード ヒントを追加したいです。
解決策:
codemirror オプション設定で、hintOptions を次のように変更します。

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

handleShowHint メソッドは次のとおりです。

//代码提示处理
			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
					}
				}
			}
	    }

 質問 4 : js コードをフォーマットするためのショートカット キーを実装する

//安装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()));
	}
},