目錄

• 寫在前面
  
• 方案一、使用全域性的樣式覆蓋（前端通用）
  
• 方案二、自定義自己的Element-ui配色
  
• 方案三、快速改變顏色
  
• 方案四、實時更換主色調
  

寫在前面

換膚這個功能，不能算是很常見，但是也是有需求的，所以這裡提供幾種前端的換膚解決方案，供大家參考。

本文將介紹幾種基於、Element-UI的換膚實現方案，力爭通俗易懂，易上手，希望大家喜歡~

方案一、使用全域性的樣式覆蓋（前端通用）

這個應該是最常見，也是大家最容易想到的，也是最容易實現的一種方案。

我們單獨寫一份樣式表（ 檔案深空藍.css），以一個特定的命名開頭（比如 .blue-theme），然後在這個 css 檔案中，完成我們第二套面板的樣式程式碼，然後當我們點選換膚的時候，就將 blue-theme 這個 class 新增到 body 標籤中，那麼這個時候，我們的換膚效果就出來了。

當我們這裡點選深空藍的時候，將 class science-blue 新增到 body 上，點選青銅綠的時候，就將 science-blue 去掉，因為我們預設的就是青銅綠。

方案二、自定義自己的Element-ui配色

預設的 Element 的配色是：

Element-UI 還提供了了一個自定義的 配色工具 以及配置頁面，通過這個工具或者這個頁面，我們可以自定義上面五種主色調以及輔助色。

配好以後，如果是工具就生成，如果是就下載。得到一個樣式檔案，這就是我們配置好的主題樣式檔案。

保持 css檔案與 fonts 目錄的關係不變（ps：這點很重要），將其放入我們的專案中。（你可以將這個css 檔案改成你喜歡的名字，比如我改成了叫：theme-summer.css）

然後在我們專案的 main. 中，註釋掉 Element-UI 的原來 css 檔案引入，引入我們剛才放進專案中的 css 檔案。

這個時候，專案中關於 Element-UI 的顏色，就變成了剛才我們自定義配置的顏色配色了。（下面是我自定義的一套顏色，你們覺得如何？）

但是，你發現沒，這樣只是將我們專案中的 Element-UI 的預設配色改成我們想要的；但是我們要做的是換膚功能，希望顏www.cppcns.com色是可以切換的。

所以，我們還是用上面的方法，給這個生成的css檔案裡面的每一個 css 樣式加上一個獨特的命名字首，然後換膚的時候，就將這個 class 新增到 body 上面，如此一來，也能實現

現在擺在眼前的一個需要解決的問題是：這個 css 檔案加名稱空間怎麼加？

我們看一下這個工具生成的，或者 配置頁面 匯出的這個 css 檔案，混淆壓縮的程式碼，手動給每一個樣式外面包裹一個 class 來做名稱空間是不現實的，所以這裡要用到一個 gulp 外掛 gulp-css-wrap ，可以幫助我們完成這個結果。

首先：

npm i gulp gulp-clean-css gulp-css-wrap -D

然後，編寫 gulpfile.js

// gulpfile.js

var path = require('path')
var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var cssWrap = require('gulp-css-wrap')

var customThemeName = '.theme-summer'

gulp.task('default',function() {
  return gulp.src( path.resolve('./index.css'))
    .pipe(cssWrap({selector: customThemeName}))
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist'))
})

然後執行 gulp

這樣就得到了一個以 .theme-summer 為名稱空間的自定義主題了。

加完以後，我們按照前面介紹的切換 body 元素的 class 的方法，就可以實現面板切換的功能了。

方案三、快速改變網站顏色

依據 Element 官網所介紹，Element 使用 SCSS 編寫，如果你的專案也使用了 SCSS，那麼可以直接在專案中改變 Element 的樣式變數。新建一個 element-variables.scss 樣式檔案。（溫馨提示：請確保你安裝了 node-sass 與 sass-loader）

element-variables.scss 檔案，這裡就不貼出來了，具體可以看這裡：element-variables.scss，這個檔案裡面定義了很多顏色變數

這種方法使用起來是簡單的，你只需將其引入

修改裡面的顏色變數即可生效。

這種方法是快捷的，修改幾個顏色變數即可生效。（然後就可以部署啦~）

這裡有一個問題，如何在 js 中修改這個 element-variables.scss 檔案裡面的變數？如果可以實現，那麼就可以實現實時動態換色了。

補充說明： js 修改 scss 變數是有方案的，但是在我們專案中無法做到動態換顏色，為什麼呢？因為我們專案中所有的 css 預編譯語言（sass,less,stylus）最終都會編譯成 css；也就是說，打包後的專案中只有編譯後的 css 檔案。那麼你 js 改 scss 變數的http://www.cppcns.com方法在打包後的專案中是不起作用的。

方案四、實時更換主色調

前面已經介紹了幾種方法可以做到換膚，但都是在我們的限定提供的幾個面板範圍內換膚；但我們有一個需求是，彈出一個顏色選擇器，然後我們選了什麼顏色，頁面的主色調就立馬改成什麼顏色。
ElementUI 官網中有實現動態換膚，它能讓使用者自定義顏色值，而且展示效果也更加優雅。 我們來看看他是怎麼實現的(這裡引用的是官方的 實現解釋)

• 獲取當前版本的 Element-UI 的樣式檔案（線上 XHR 獲取）
• 根據使用者選擇的主題色，生成一系列對應的顏色（比如，選擇綠色，生成不同程度的淺綠，深綠…）
• 顏色替換（用剛剛生成的顏色來替換樣式檔案中的顏色）
• 直接在頁面上加 style 標籤，把生成的樣式填進去

我們一起來看一下技術實現細節吧，強烈建議你開啟程式碼一起來看： https://.com/Neveryu/vue-/blob/master/src/views/theme/index.vue#L167-L297）

1、首先我們需要拿到通過 package.json 拿到 element-ui 的版本號，根據該版本號去請求相應的樣式。

// 如果沒有chalk就是第一次換顏色，需要遠端獲取css檔案，賦值給chalk
// 後續的換顏色操作，就不用遠端獲取了
if (!this.chalk) {
    const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
    await this.getCSSString(url,'chalk')
}

getCSSString 方法是一個常用 XHR，用來獲取遠端 css 資原始檔。

2、根據使用者選擇的顏色，生成相應的顏色

/**
 * 傳入一個顏色的HEX，得到這個顏色的深淺顏色陣列
 * 我們知道，我們預設的主色調藍色，在實際使用中，還需要對應的淺藍和深藍
 * @param  {[string]]} theme [color]
 * @return {[array]}       [對應的深淺顏色陣列]
 */
getThemeCluster(theme) {
    // 具體看程式碼，這裡就不寫了
    // ...
}

3、顏色替換

/* 更新樣式 - 使用新的顏色變數替換之前的 */
updateStyle(style,oldCluster,newCluster) {
  let newStyle = style
  oldCluster.forEach((color,index) => {
    newStyle = newStyle.replace(new RegExp(color,'ig'),newCluster[index])
  })
  return newStyle
}

4、在頁面上加 style 標籤，把生成的樣式填進去

let styleTag = docuEIQmZTOment.getElementById(id)http://www.cppcns.com
if (!styleTag) {
  styleTag = document.createElement('style')
  styleTag.setAttribute('id',id)
  document.head.appendChild(styleTag)
}
styleTag.innerText = newStyle

第一次換顏色的時候，需要建立一個 style 標籤，新增到 body 中，後面的換顏色，就不用了。

OK啦，看下效果：

在這裡插入圖片描述

【線上演示：vue-cms】
【原始碼：github.com/Neveryu/vue-cms】

到此這篇關於基於Vue結合ElementUI的換膚解決方案的文章就介紹到這了,更多相關Vue結合ElementUI換膚內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！