修改文字颜色是需要使用deep穿透的,
要动态修改背景色, 就必然需要一个条件去改变它,
流程就是: 条件 -> deep穿透 -> 文字颜色改变.
和普通的input相比, el-input就多了一个deep穿透, 不然改不了文字颜色.
难点
这里的难点是deep穿透在js中搞不了, 所以我们要通过间接的方式实现deep穿透的控制,
间接控制deep穿透的方法
<el-input v-model="input" ref="inputElement" :class="{ overLength: isOverLength }"> </el-input>
const isOverLength = ref(false)
.overLength:deep(.el-input__inner) {
color: red; /* 超过10个字符时文字颜色变为红色 */
}
在el-input的输入框文字改变的时候, 修改isOverLength来控制类overLength的有效性,
从而间接控制 .overLength:deep(.el-input__inner) {
如果 .overLength 不生效, 那么 :deep(.el-input__inner) 就不会生效,
这样, 动态修改el-input输入框文字颜色的目的就达到了.
