基于Vue結(jié)合ElementUI的換膚解決方案

更新時(shí)間：2021年09月07日 12:08:32 作者：Neveryu

本文將介紹幾種基于Vue、Element-UI的換膚實(shí)現(xiàn)方案，力爭(zhēng)通俗易懂，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

寫在前面

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

本文將介紹幾種基于Vue、Element-UI的換膚實(shí)現(xiàn)方案，力爭(zhēng)通俗易懂，易上手，希望大家喜歡~

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

這個(gè)應(yīng)該是最常見，也是大家最容易想到的，也是最容易實(shí)現(xiàn)的一種方案。

我們單獨(dú)寫一份樣式表（css 文件深空藍(lán).css），以一個(gè)特定的命名開頭（比如 .blue-theme），然后在這個(gè) css 文件中，完成我們第二套皮膚的樣式代碼，然后當(dāng)我們點(diǎn)擊換膚的時(shí)候，就將 blue-theme 這個(gè) class 添加到 body 標(biāo)簽中，那么這個(gè)時(shí)候，我們的換膚效果就出來了。

當(dāng)我們這里點(diǎn)擊深空藍(lán)的時(shí)候，將 class science-blue 添加到 body 上，點(diǎn)擊青銅綠的時(shí)候，就將 science-blue 去掉，因?yàn)槲覀兡J(rèn)的就是青銅綠。

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

默認(rèn)的 Element 的配色是：

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

配好以后，如果是工具就生成，如果是網(wǎng)頁就下載。得到一個(gè)樣式文件，這就是我們配置好的主題樣式文件。

保持 css文件與 fonts 目錄的關(guān)系不變（ps：這點(diǎn)很重要），將其放入我們的項(xiàng)目中。（你可以將這個(gè)css 文件改成你喜歡的名字，比如我改成了叫：theme-summer.css）

然后在我們項(xiàng)目的 main.js 中，注釋掉 Element-UI 的原來 css 文件引入，引入我們剛才放進(jìn)項(xiàng)目中的 css 文件。

這個(gè)時(shí)候，項(xiàng)目中關(guān)于 Element-UI 的顏色，就變成了剛才我們自定義配置的顏色配色了。（下面是我自定義的一套顏色，你們覺得如何？）

但是，你發(fā)現(xiàn)沒，這樣只是將我們項(xiàng)目中的 Element-UI 的默認(rèn)配色改成我們想要的；但是我們要做的是換膚功能，希望顏色是可以切換的。

所以，我們還是用上面的方法，給這個(gè)生成的css文件里面的每一個(gè) css 樣式加上一個(gè)獨(dú)特的命名前綴，然后換膚的時(shí)候，就將這個(gè) class 添加到 body 上面，如此一來，也能實(shí)現(xiàn)很豐富的換膚功能（因?yàn)槲覀兛梢宰约号浜芏嗵缀每吹呐渖?/p>

現(xiàn)在擺在眼前的一個(gè)需要解決的問題是：這個(gè) css 文件加命名空間怎么加？

我們看一下這個(gè)工具生成的，或者配置頁面導(dǎo)出的這個(gè) css 文件，混淆壓縮的代碼，手動(dòng)給每一個(gè)樣式外面包裹一個(gè) class 來做命名空間是不現(xiàn)實(shí)的，所以這里要用到一個(gè) gulp 插件 gulp-css-wrap ，可以幫助我們完成這個(gè)結(jié)果。

首先：

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'))
})

然后運(yùn)行 gulp

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

加完以后，我們按照前面介紹的切換 body 元素的 class 的方法，就可以實(shí)現(xiàn)皮膚切換的功能了。

方案三、快速改變網(wǎng)站顏色

依據(jù) Element 官網(wǎng)所介紹，Element 使用 SCSS 編寫，如果你的項(xiàng)目也使用了 SCSS，那么可以直接在項(xiàng)目中改變 Element 的樣式變量。新建一個(gè) element-variables.scss 樣式文件。（溫馨提示：請(qǐng)確保你安裝了 node-sass 與 sass-loader）

element-variables.scss 文件，這里就不貼出來了，具體可以看這里：element-variables.scss，這個(gè)文件里面定義了很多顏色變量

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

修改里面的顏色變量即可生效。

這種方法是快捷的，修改幾個(gè)顏色變量即可生效。（然后就可以部署啦~）

這里有一個(gè)問題，如何在 js 中修改這個(gè) element-variables.scss 文件里面的變量？如果可以實(shí)現(xiàn)，那么就可以實(shí)現(xiàn)實(shí)時(shí)動(dòng)態(tài)換色了。

補(bǔ)充說明： js 修改 scss 變量是有方案的，但是在我們項(xiàng)目中無法做到動(dòng)態(tài)換顏色，為什么呢？因?yàn)槲覀冺?xiàng)目中所有的 css 預(yù)編譯語言（sass,less,stylus）最終都會(huì)編譯成 css；也就是說，打包后的項(xiàng)目中只有編譯后的 css 文件。那么你 js 改 scss 變量的方法在打包后的項(xiàng)目中是不起作用的。

方案四、實(shí)時(shí)更換主色調(diào)

前面已經(jīng)介紹了幾種方法可以做到換膚，但都是在我們的限定提供的幾個(gè)皮膚范圍內(nèi)換膚；但我們有一個(gè)需求是，彈出一個(gè)顏色選擇器，然后我們選了什么顏色，頁面的主色調(diào)就立馬改成什么顏色。
ElementUI 官網(wǎng)中有實(shí)現(xiàn)動(dòng)態(tài)換膚，它能讓用戶自定義顏色值，而且展示效果也更加優(yōu)雅。我們來看看他是怎么實(shí)現(xiàn)的(這里引用的是官方的實(shí)現(xiàn)解釋)

獲取當(dāng)前版本的 Element-UI 的樣式文件（在線 XHR 獲?。?/li>
根據(jù)用戶選擇的主題色，生成一系列對(duì)應(yīng)的顏色（比如，選擇綠色，生成不同程度的淺綠，深綠…）
顏色替換（用剛剛生成的顏色來替換樣式文件中的顏色）
直接在頁面上加 style 標(biāo)簽，把生成的樣式填進(jìn)去

我們一起來看一下技術(shù)實(shí)現(xiàn)細(xì)節(jié)吧，強(qiáng)烈建議你打開代碼一起來看： https://github.com/Neveryu/vue-cms/blob/master/src/views/theme/index.vue#L167-L297）

1、首先我們需要拿到通過 package.json 拿到 element-ui 的版本號(hào)，根據(jù)該版本號(hào)去請(qǐng)求相應(yīng)的樣式。

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

getCSSString 方法是一個(gè)常用 XHR，用來獲取遠(yuǎn)程 css 資源文件。

2、根據(jù)用戶選擇的顏色，生成相應(yīng)的顏色

/**
 * 傳入一個(gè)顏色的HEX，得到這個(gè)顏色的深淺顏色數(shù)組
 * 我們知道，我們默認(rèn)的主色調(diào)藍(lán)色，在實(shí)際使用中，還需要對(duì)應(yīng)的淺藍(lán)和深藍(lán)
 * @param  {[string]]} theme [color]
 * @return {[array]}       [對(duì)應(yīng)的深淺顏色數(shù)組]
 */
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 標(biāo)簽，把生成的樣式填進(jìn)去

let styleTag = document.getElementById(id)
if (!styleTag) {
  styleTag = document.createElement('style')
  styleTag.setAttribute('id', id)
  document.head.appendChild(styleTag)
}
styleTag.innerText = newStyle

第一次換顏色的時(shí)候，需要?jiǎng)?chuàng)建一個(gè) style 標(biāo)簽，添加到 body 中，后面的換顏色，就不用了。

OK啦，看下效果：

在這里插入圖片描述