element-ui主題切換功能開發

最近公司在作本身的前端規範化項目，技術爲element-ui+vue,須要開發幾套主題皮膚 而且能夠一鍵切換。

首先很天然的想到了看element官網的自定義主題方法，通過研究採用了以下方法，好處是能夠經過修改scss變量實現批量修改

咱們須要開發黑色和藍色兩套主題，因而新建兩個文件以下

直接引入兩套scss確定是不行的，想到經過給頁面添加類名來切換兩套主題樣式，因而新建theme.scss以下

這樣原來的兩套主題樣式就分別添加到blueTheme和blackTheme兩個類名之下，在main.js中引入theme.scss。 接着咱們須要動態切換類名了，經過下拉組件來切換樣式以下

咱們選擇動態切換body上的類名，方法以下

這樣咱們就實現了主題切換功能啦。

可能有人會問爲啥不直接經過vue指令動態切換<div id='app'></div>上的 類名而要經過直接操做dom節點的方式修改body類名呢,其實開始我也是這樣考慮的，後來發現element生成的組件會在此項目啓動節點以外，因此直接經過修改body類名。

另開發過程當中會發現字體圖標沒法使用，可經過下載其字體文件直接引入便可解決。