背景

內(nèi)部系統(tǒng)雖然使用了element-ui，但同時(shí)又混雜了多種風(fēng)格的樣式和各自寫的通用組件，在參與新功能開發(fā)時(shí)，產(chǎn)品經(jīng)理的設(shè)計(jì)需要以綠色為主題色，看到element官網(wǎng)有個(gè)自定義主題，這就不需要自己去寫符合設(shè)計(jì)的組件或者手動(dòng)修改element樣式；同時(shí)又不想影響之前的默認(rèn)樣式（不知道會(huì)不會(huì)有黑魔法，手動(dòng)修改element樣式之類），所以就想做成只有某些功能頁能夠使用自定義主題的樣式。

下載自定義主題

我們可以使用官網(wǎng)推薦的在線主題生成工具，點(diǎn)擊右上方的切換主題色，選取自定義的主題色，作者在這使用的是#129611，可以看到效果：

#129611

當(dāng)然你也可以在官網(wǎng)右上角的下拉顏色選取自定義主題色，可以實(shí)時(shí)看到不同組件切換主題色后的效果；

在在線主題生成工具切換主題色后就可以下載當(dāng)前主題對(duì)應(yīng)的樣式文件了（css文件），下載后我們看到有不同組件的樣式和一個(gè)index.css以及一個(gè)font目錄，我們只需要index.css文件（全部組件的樣式），并且刪除文件中對(duì)font目錄文件的引用（我們已經(jīng)有全局的element默認(rèn)主題色），然后新建另一個(gè)index.scss并將原index.css文件改成cumstomize.scss（這里可以隨意命名，但要以scss后綴名）

image

index.scss文件：

// 在vue的入口引用該文件
// 只在當(dāng)前類的作用域
.element-customize {
  @import "customize.scss";
}

這樣設(shè)置后只有.element-customize下的element組件會(huì)使用自定義樣式，而不會(huì)影響到全局。

注意

有幾個(gè)組件不能使用到局部的自定義主題

• $confirm

  • 該組件會(huì)在body新建一個(gè)confirm組件，所以不在當(dāng)前.element-customize組件下，這里我們可以使用confirm的customClass屬性，設(shè)置為.element-customize

• popover

  • 這組件也是在body最后插入，通過$ref屬性關(guān)聯(lián)，可以使用popper-class屬性

總結(jié)

局部自定義主題只是暫時(shí)存在的，之后會(huì)推廣到全局使用，做到樣式統(tǒng)一風(fēng)格之后就可以直接替換默認(rèn)的element主題了。