Vue Element-Ui 改變el-Input背景樣式

Element-ui是一個很是好的UI設計模塊，它提供給咱們不少好看的按鈕樣式，很是適用於快速搭建UI，下面說說若是使用了element-ui以後，要更改它默認的el-Input樣式應該怎麼操做。

使用調試工具找出他的樣式默認表，具體操做以下：

 

 

從上圖知道默認的樣式是.el-input__inner,那下面在改爲本身想要的顏色：

<style >
 
.el-input__inner[DangerColor="danger"] {
  background-color: #F56C6C;    //紅色
}
 
.el-input__inner[WarningColor="warning"] {
  background-color: #E6A23C;    //橙色
}
 
.el-input__inner[SuccessColor="success"] {
  background-color: #67C23A;    //綠色
}
 
</style>
 在這裏特別提醒，若是你修改不成功，那麼多是，style標籤上加上scoped屬性，表示它的樣式做用於當下模塊，.el-inout__inner是一個全局屬性。

    可是，若是你不加scoped屬性，你這個頁面的style在其餘頁面就能夠直接調用了，因此建議寫入統一的全局樣式文件中：

 

 

下面繼續說說怎麼動態改變el-input默認背景顏色:

<!-- 當el-Input輸入正常或者是不輸入，那麼el-Input背景不改變 -->
<el-input v-if="(MyInput==='')||(MyInput==='正常')" size="mini"
v-model="MyInput" readonly/>          
 
<el-input v-else size="mini" WarningColor='warning' v-model="MyInput" readonly/>                     <!--  不然，el-Input背景變成橙色 -->
以上就是動態改變默認el-Input背景色的一種方法。
————————————————