如果直接修改el-input的placeholder字体颜色,其实很简单
/deep/ .el-input__inner::placeholder {
color: red;
text-align: center;
}
但如果是子组件,就很难在父组件中直接去改变,也许是我没有遇到更好的方法
我的解决思路是在父组件中根据条件传值给子组件,子组件根据条件,三元表达式的形式动态增加类名
代码如下:
1/在父组件的子组件上定义redHolder,父组件是列表,所以传值是row.redHolder
<EditRemarkInput
v-model="row.majorAddRemark"
:redHolder="row.redHolder"
/ >
2/在父组件中根据条件赋值
if (item.xxx > item.xxx) {
item.redHolder = true
} else {
item.redHolder = false
}
3/在子组件中给input加类名
<div class="textarea-nput-box">
<el-input :class="redHolder ? 'invalid' : ''" v-model="remarkStr" :placeholder="editHolder + editTitle" />
</div>
4/子组件prop中接收redHolder 的值
redHolder: {
type: Boolean,
default: false,
},
5/子组件css样式
.textarea-nput-box {
display: flex;
align-items: center;
position: relative;
// 改变placeholder字体颜色
.invalid {
/deep/ .el-input__inner::placeholder {
color: red;
text-align: center;
}
}
}