我使用的element-ui的版本是V1.4.13。
創(chuàng)新互聯(lián)公司致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營(yíng)銷(xiāo)，包括成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、SEO優(yōu)化、網(wǎng)絡(luò)推廣、整站優(yōu)化營(yíng)銷(xiāo)策劃推廣、電子商務(wù)、移動(dòng)互聯(lián)網(wǎng)營(yíng)銷(xiāo)等。創(chuàng)新互聯(lián)公司為不同類(lèi)型的客戶(hù)提供良好的互聯(lián)網(wǎng)應(yīng)用定制及解決方案，創(chuàng)新互聯(lián)公司核心團(tuán)隊(duì)10年專(zhuān)注互聯(lián)網(wǎng)開(kāi)發(fā)，積累了豐富的網(wǎng)站經(jīng)驗(yàn)，為廣大企業(yè)客戶(hù)提供一站式企業(yè)網(wǎng)站建設(shè)服務(wù)，在網(wǎng)站建設(shè)行業(yè)內(nèi)樹(shù)立了良好口碑。
如上圖所示，如果使用el-button,加顏色是可以通過(guò)設(shè)置type屬性的值，加圖標(biāo)就設(shè)置icon屬性的值。
現(xiàn)在產(chǎn)品給了一個(gè)需求，就是自定義的很多種類(lèi)別，不同的類(lèi)別的按鈕顯示不同的顏色和圖標(biāo)。如下圖所示：
為了方便開(kāi)發(fā)，目前的解決方案是：添加一個(gè)自定義全局指令，同時(shí)在element-ui源碼中，加入對(duì)應(yīng)的組件。開(kāi)發(fā)人員在開(kāi)發(fā)時(shí)只要在type中添加不同的類(lèi)的值，就能添加上顏色和圖標(biāo)。
1、在element-ui的button源碼中加了自定義指令otherRender，以及一個(gè)局部組件vRender
2、局部組件vRender的寫(xiě)法：
這里不懂的可以看下 https://cn.vuejs.org/v2/guide/render-function.html中的函數(shù)式組件
3、自定義指令otherRender，寫(xiě)在項(xiàng)目公共的js中。這里我先將所有的類(lèi)對(duì)應(yīng)的顏色類(lèi)和圖標(biāo)定義好。css樣式是根據(jù)需求自定義的
然后再在指令中循環(huán)添加
在使用el-button時(shí)只要添加對(duì)應(yīng)的type值就能使用，對(duì)應(yīng)的顏色和圖標(biāo)就會(huì)顯示了
下面看下自定義elementui中的圖標(biāo)
前提
elementui圖標(biāo)庫(kù)圖標(biāo)較少
當(dāng)你想用elementui的控件而不想用它的圖標(biāo)時(shí)，就可以使用自定義的方式來(lái)實(shí)現(xiàn)
實(shí)現(xiàn)
el-icon-my-export為我自定義的圖標(biāo)命名
導(dǎo)出
重慶分公司
重慶分公司
//使用圖片來(lái)替換
//before屬性中的content文本是用來(lái)占位的,必須有
//可以設(shè)置字體大小來(lái)確定大小
//使用visibility: hidden;來(lái)隱藏文字
.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屬性設(shè)置對(duì)應(yīng)的content就行
.el-icon-my-export{
font-size: 16px;
}
.el-icon-my-export:before{
content: "\e611";
}
content里面使用漢字大小會(huì)比較正常，但是漢字有時(shí)候會(huì)出現(xiàn)亂碼，可以使用Unicode編碼
//編碼后的的替為 \u66ff
//書(shū)寫(xiě)到css里面的時(shí)候需要去掉u
.el-icon-my-export:before{
content: "\66ff";
font-size: 16px;
visibility: hidden;
}其他控件的圖標(biāo)替換大多如此，當(dāng)然具體問(wèn)題具體分析，我也不確定會(huì)不會(huì)有不同的情況
總結(jié)
以上所述是小編給大家介紹的element-ui 的el-button組件中添加自定義顏色和圖標(biāo)的實(shí)現(xiàn)方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
