修改 el-input 內部樣式

在工作中有時候需要單獨設置某個 el-input 組件的內部樣式，比如 字體顏色、背景色、寬度、高度等，這時就需要修改 el-input 組件的內部自帶樣式，修改方式如下：

修改前：

el-input 獨占滿一整行

修改後：

模板代碼

<div class="elinput">
    <el-input v-model="elinputValue" placeholder="ABC" size="normal" class="input-demo"></el-input>
</div>

data 數據

data() {
    return {
      elinputValue: ''
    }
}

樣式代碼

<style  lang="scss" scoped>
.elinput {
  height: 50px;
  background: pink;
  display: flex;
  align-items: center;
  .input-demo {
    width: 180px;
    /deep/ .el-input__inner {
      text-align: center; // 字體居中
      height: 35px; // 高度
      line-height: 35px; // 高度
      background: #c5c5c5; // 背景色
      border: 2px solid blue; // 邊框寬度 實線 顏色
      border-radius: 15px; // 邊角-圓角半徑
      color: green; // 內容字體顏色
    }
    /deep/ .el-input__inner::placeholder {
      color: red; // 提示字體顏色
    }
  }
}
</style>

總結：

1. 通過 /deep/ .el-input__inner 修改內部樣式
2. 通過給 el-input 組件加 class 屬性，然後在class 屬性內修改，防止修改到其他 el-input 組件