vue修改子组件中的el-input的placeholder字体颜色

1/在父组件的子组件上定义redHolder，父组件是列表，所以传值是row.redHolder。我的解决思路是在父组件中根据条件传值给子组件，子组件根据条件，三元表达式的形式动态增加类名。如果直接修改el-input的placeholder字体颜色，其实很简单。但如果是子组件，就很难在父组件中直接去改变，也许是我没有遇到更好的方法。4/子组件prop中接收redHolder 的值。3/在子组件中

花椒和蕊

10280人浏览 · 2022-08-24 18:07:29

花椒和蕊 · 2022-08-24 18:07:29 发布

如果直接修改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;
      }
    }
  }