ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue+el-dialog中使用codemirror 遇到的问题

2021-11-10 15:34:55  阅读:751  来源: 互联网

标签:el arr vue const start jshint dialog var codemirror


注: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();// 得到光标
				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
					}
				}
			}
	    }

标签:el,arr,vue,const,start,jshint,dialog,var,codemirror
来源: https://blog.csdn.net/qq_44711316/article/details/121165838

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有