動態換膚
阿新 • • 發佈：2018-12-24
因專案需要，對專案內的頁面需要進行動態換膚。網上找了些通用解決辦法。
核心問題：
- 如何能快速的切換主題色？(只有固定的一種面板)
- 如果又想把主題色切換為以前的呢？（有多種可切換的面板）
- 該以何種方式編寫標籤的css屬性？
這裡分享下兩種情形：
1、所有樣式的css模版都在專案中，根據不同條件，在body層新增面板class，通過引用不同的樣式檔案，來顯示不同的面板。
2、把涉及到換顏色的css獨立出來，再通過js動態載入頁面上的style標籤，將顏色填進去
以第一種為例：
如何增加主題檔案-具體操作過程
說明：此專案UI是在elementUI基礎上建立的，所以，我們可以通過element提供的方法，來 自定義主題。
生成自定義主題檔案
使用工具下載自定義主題檔案，並命名為wq-variables.css。以後我們如果想要增加主題檔案，只需要修改變數檔案中各個變數所對應的值。
編譯主題
我們利用工具來編譯主題。
在終端，將剛剛修改好的變數檔案，通過命令node_modules/.bin/et -c wq-variables.css來編譯主題。
給自定義主題增加名稱空間
預設情況下，編譯的主題目錄會放在./theme下。由於，我們是通過改變css的名稱空間來切換主題的，那麼，我們就需要為剛生成的主題增加名稱空間。主題檔案內容很多，如果手動一個個新增名稱空間，工作量巨大，這個時候，可以使用另一個 給css增加名稱空間的工具。下載這個專案，然後只需要修改gulpfile.js檔案中3處內容，就可以得到想要的內容，這裡注意，本專案css自定義的名稱空間統一為custom-******,其中******建議使用主題色的16進位制編碼,也可以使用其他字串，但是要和radio標籤統一。
引用自定義主題
自定義主題檔案，已經有了，只剩下如何引入使用了。
- 在
App.vue中import新增的主題樣式（這個也可以寫在topbar.vue檔案中，到底哪種好些，我也不清楚） - 在
./src/components/nav/topbar/topbar.vue中，新增對應的radio標籤
經過以上兩步，就可以正常使用了。
如何處理與自定義主題不同部分的樣式
可以新建一個css檔案，然後在其中編寫樣式，之後在入口檔案引入就ok了。
具體效果，可檢視於此網站：
http://weiqinl.com/vue-element-admin/