這篇文章主要介紹了element-ui 的el-button組件中添加自定義顏色和圖標的實現方法，目前的解決方案是：添加一個自定義全局指令，同時在element-ui源碼中，加入對應的組件。須要的朋友跟隨小編一塊兒看看吧css
我使用的element-ui的版本是V1.4.13。html
如上圖所示，若是使用el-button,加顏色是能夠經過設置type屬性的值，加圖標就設置icon屬性的值。vue
如今產品給了一個需求，就是自定義的不少種類別，不一樣的類別的按鈕顯示不一樣的顏色和圖標。以下圖所示：element-ui
爲了方便開發，目前的解決方案是：添加一個自定義全局指令，同時在element-ui源碼中，加入對應的組件。開發人員在開發時只要在type中添加不一樣的類的值，就能添加上顏色和圖標。ide
一、在element-ui的button源碼中加了自定義指令otherRender，以及一個局部組件vRender函數
二、局部組件vRender的寫法：字體
這裏不懂的能夠看下 https://cn.vuejs.org/v2/guide/render-function.html中的函數式組件ui
三、自定義指令otherRender，寫在項目公共的js中。這裏我先將全部的類對應的顏色類和圖標定義好。css樣式是根據需求自定義的編碼
而後再在指令中循環添加url
在使用el-button時只要添加對應的type值就能使用，對應的顏色和圖標就會顯示了
下面看下自定義elementui中的圖標
前提
elementui圖標庫圖標較少
當你想用elementui的控件而不想用它的圖標時，就可使用自定義的方式來實現
實現
el-icon-my-export爲我自定義的圖標命名
<el-button class="default" icon="el-icon-my-export">導出</el-button>
//使用圖片來替換 //before屬性中的content文本是用來佔位的,必須有 //能夠設置字體大小來肯定大小 //使用visibility: hidden;來隱藏文字 .el-icon-my-export{ background: url(/officeHouse/resources/images/export.png) center no-repeat; background-size: cover; } .el-icon-my-export:before{ content: "替"; font-size: 16px; visibility: hidden; } //若是直接使用字體圖片 //直接在before屬性設置對應的content就行 .el-icon-my-export{ font-size: 16px; } .el-icon-my-export:before{ content: "\e611"; } content裏面使用漢字大小會比較正常，可是漢字有時候會出現亂碼，可使用Unicode編碼 //編碼後的的替爲 \u66ff //書寫到css裏面的時候須要去掉u .el-icon-my-export:before{ content: "\66ff"; font-size: 16px; visibility: hidden; }
其餘控件的圖標替換大多如此，固然具體問題具體分析，我也不肯定會不會有不一樣的狀況