惠州网站建设 惠州邦织梦网站百度推送加哪
张小明 2026/1/11 9:37:37
惠州网站建设 惠州邦,织梦网站百度推送加哪,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