知名网站建设公外贸企业网站管理系统
张小明 2026/1/13 0:21:55
知名网站建设公,外贸企业网站管理系统,先做个在线电影网站该怎么做,怎么做代刷网网站app在后台管理系统中用户输入内容需要对特殊字符进行颜色标识#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