济南川芎网站建设网站开发涉及技术

济南川芎网站建设,网站开发涉及技术,迪庆公司网站开发方法,wordpress动漫模板在后台管理系统中用户输入内容需要对特殊字符进行颜色标识#xff0c;这里使用到的是elementPlus#xff0c;因为输入框是字符串无法做颜色标识#xff0c;只能使用标签形式来做颜色标识。使用定位将渲染元素和输入框重合在一起#xff0c;输入框背景透明、颜色透明#x…在后台管理系统中用户输入内容需要对特殊字符进行颜色标识这里使用到的是elementPlus因为输入框是字符串无法做颜色标识只能使用标签形式来做颜色标识。使用定位将渲染元素和输入框重合在一起输入框背景透明、颜色透明循环输入元素对每个元素进行判断是否需要颜色标记有的话插入一个带class标签span来处理templatedivclasskeywordInputContainer!--和输入层完全重叠负责渲染标色文字--divclasshighlightDevv-htmlhighlightedText/div!--透明仅负责编辑--el-inputclasshighlightInputv-modelinputDatatypetextarearesizenoneinputhandleInput//div/templatescript langtssetupconstinputDataref()consthighlightedTextref()consthighlightBracketContent(inputText:string){if(!inputText)returnletresultconstinputTextNewJSON.parse(JSON.stringify(inputText))// 遍历每个字符处理for(leti0;iinputTextNew.length;i){constcharinputTextNew[i]// 获取字符ASCII编码十进制constasciiCodechar.charCodeAt(0)letcharHtml// 1. 控制字符0-31、127)if((asciiCode0asciiCode31)||asciiCode127){charHtmlspan classhighlight-text${char}/span}// 2. 显示字符32-126elseif(asciiCode32asciiCode126){charHtmlspan classhighlight-text${char}/span}else{charHtmlchar}resultcharHtml;}returnresult;}// 实时输入触发标色consthandleInput(){highlightedText.valuehighlightBracketContent(inputData.value);}watch(inputData,handleInput,{immediate:true});/scriptstyle scoped langscss:deep(.highlight-text){background:#fbde28!important;margin:0!important;padding:0!important;border:none!important;// background: none !important;font-weight:inherit!important;font-size:inherit!important;line-height:inherit!important;font-family:inherit!important;vertical-align:baseline!important;}.keywordInputContainer{width:100%;height:100%;position:relative;.highlightDev{position:absolute;top:0;left:0;height:100%;width:100%;padding:8px11px!important;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif!important;font-size:14px!important;line-height:1.5!important;word-break:break-all;white-space:pre-wrap;overflow-y:auto;pointer-events:none;z-index:1;}// 输入层透明仅保留编辑功能:deep(.highlightInput){position:relative;width:100%;height:100%;box-sizing:border-box;z-index:999;.el-textarea__inner{background-color:transparent!important;color:transparent!important;-webkit-text-fill-color:transparent!important;caret-color:#333!important;padding:8px11px!important;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif!important;font-size:14px!important;line-height:1.5!important;word-break:break-all;white-space:pre-wrap;border:1px solid #dcdfe6!important;resize:none!important;:focus{caret-color:#409eff!important;border-color:#409eff!important;}}}}/style