在实际项目开发中,遇到过业务人员提出想要在input框输入内容以后,遇到特殊字符要显示特殊颜色,项目本身使用的前端是vue3 + element-plus 想要直接通过修改css或者其他特殊方式直接修改el-input内的颜色,一直没有调查到合适的方法,但是经过调查,研究出以下方案,希望对大家有所帮助,请指教!!!
具体方案:
step1. 首先设置一个可编辑的div区域并仿照el-input的样式,对应做出修改
<el-row>
<div
v-if="reloadDivData"
id="inputContent"
class="edit"
placeholder="请在这输入内容"
contenteditable="true"
v-html="editDivHtml"
style="width: 90%; border: 1px solid var(--el-border-color)"
ref="editDivArea"
@blur="getEditDivHtmlValue($event, item)"></div>
</el-row>
step2.并设置相关属性
// 可编辑div区域刷新
const reloadDivData = ref(true);
// 可编辑div区域ref
const editDivArea = ref(null);
step3. 可以绑定一个输入的事件,在输入的过程中就可以获取到div的内容
// 绑定输入的事件,在输入的时候获取到div的内容
const testEditDivSearchRes = () => {
const firstEditDiv = document.getElementById("firstInputEditContent");
if (firstEditDiv != null) {
firstEditDiv.addEventListener("input", function () {
let inputContext: any = firstEditDiv.textContent;
if (inputContext != "" && inputContext != null) {
inputContext = inputContext.toString();
currentTestTableValue.value = _.filter(_.toArray(testNewComponentDataList),
function (o) {
return o.feeCode.includes(inputContext);
});
} else {
currentTestTableValue.value = testNewComponentDataList;
}
});
}
};
step4. 把想要显示的内容转化成html显示在div内
// 把对应的值转化成需要的html
const formatValueToEditDivHtml = (val: any) => {
return (
'<span style="position: absolute;font-size: 11px;margin-top: 10px;margin-left: 10px;">' +
val.split("/")[0] +
"/" +
val.split("/")[1] +
"/" +
val.split("/")[2] +
(val.split("/").length > 9 ? "/" + val.split("/")[3] : "") +
'</span><span style="position: absolute;display: block;margin-top: 25px;color: green;font-size: 10px;margin-left: 10px;">' +
(val.split("/").length > 9 ? val.split("/")[4] : val.split("/")[3]) +
'</span><span style="display: block;position: absolute;margin-top: 40px;color: green;font-size: 10px;margin-left: 10px;">' +
(val.split("/").length > 9
? val.split("/")[5] + "/" + val.split("/")[6]
: val.split("/")[4] + "/" + val.split("/")[5]) +
'</span><span style="float: left;display: block;position: absolute;margin-top: 55px;color: green;font-size: 10px;margin-left: 10px;">' +
val.slice(-26) +
"</span>"
);
};
以上是相关解决方案,有什么更好,更方便的办法,欢迎指教!!!