Vue結(jié)合ElementUI實現(xiàn)換膚功能的實例

這篇文章主要介紹“Vue結(jié)合ElementUI實現(xiàn)換膚功能的實例”，在日常操作中，相信很多人在Vue結(jié)合ElementUI實現(xiàn)換膚功能的實例問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue結(jié)合ElementUI實現(xiàn)換膚功能的實例”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

目錄

• 寫在前面
  

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

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

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

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

寫在前面

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

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

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

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

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

當我們這里點擊深空藍的時候，將 class science-blue 添加到 body 上，點擊青銅綠的時候，就將 science-blue 去掉，因為我們默認的就是青銅綠。

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

默認的 Element 的配色是：

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

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

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

然后在我們項目的 main.js 中，注釋掉 Element-UI 的原來 css 文件引入，引入我們剛才放進項目中的 css 文件。

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

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

所以，我們還是用上面的方法，給這個生成的css文件里面的每一個 css 樣式加上一個獨特的命名前綴，然后換膚的時候，就將這個 class 添加到 body 上面，如此一來，也能實現(xiàn)很豐富的換膚功能（因為我們可以自己配很多套好看的配色）

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

我們看一下這個工具生成的，或者 配置頁面 導出的這個 css 文件，混淆壓縮的代碼，手動給每一個樣式外面包裹一個 class 來做命名空間是不現(xiàn)實的，所以這里要用到一個 gulp 插件 gulp-css-wrap ，可以幫助我們完成這個結(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'))
})

然后運行 gulp

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

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

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

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

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

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

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

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

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

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

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

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

• 獲取當前版本的 Element-UI 的樣式文件（在線 XHR 獲取）

• 根據(jù)用戶選擇的主題色，生成一系列對應的顏色（比如，選擇綠色，生成不同程度的淺綠，深綠…）

• 顏色替換（用剛剛生成的顏色來替換樣式文件中的顏色）

• 直接在頁面上加 style 標簽，把生成的樣式填進去

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

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

// 如果沒有chalk就是第一次換顏色，需要遠程獲取css文件，賦值給chalk
// 后續(xù)的換顏色操作，就不用遠程獲取了
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、根據(jù)用戶選擇的顏色，生成相應的顏色

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

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

第一次換顏色的時候，需要創(chuàng)建一個 style 標簽，添加到 body 中，后面的換顏色，就不用了。

OK啦，看下效果：

在這里插入圖片描述

到此，關(guān)于“Vue結(jié)合ElementUI實現(xiàn)換膚功能的實例”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>