基於Vue結合ElementUI的換膚解決方案

寫在前面

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

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

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

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

我們單獨寫一份樣式表(css 文件深空藍.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.js 中,註釋掉 Element-UI 的原來 css 文件引入,引入我們剛才放進項目中的 css 文件。

這個時候,項目中關於 Element-UI 的顏色,就變成瞭剛才我們自定義配置的顏色配色瞭。(下面是我自定義的一套顏色,你們覺得如何?)

但是,你發現沒,這樣隻是將我們項目中的 Element-UI 的默認配色改成我們想要的;但是我們要做的是換膚功能,希望顏色是可以切換的。

所以,我們還是用上面的方法,給這個生成的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 變量的方法在打包後的項目中是不起作用的。

方案四、實時更換主色調

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

  • 獲取當前版本的 Element-UI 的樣式文件(在線 XHR 獲取)
  • 根據用戶選擇的主題色,生成一系列對應的顏色(比如,選擇綠色,生成不同程度的淺綠,深綠…)
  • 顏色替換(用剛剛生成的顏色來替換樣式文件中的顏色)
  • 直接在頁面上加 style 標簽,把生成的樣式填進去

我們一起來看一下技術實現細節吧,強烈建議你打開代碼一起來看: https://github.com/Neveryu/vue-cms/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 = document.getElementById(id)
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換膚內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: