Vue 換膚的示例實(shí)踐
最近公司做的項(xiàng)目得到一個(gè)網(wǎng)站換膚的需求，也就是切換主題。那么如何切換主題色呢？切換主題色其實(shí)就是切換 CSS，然而在項(xiàng)目中不僅只有 CSS 需要換膚，圖標(biāo)和圖片也需要跟隨主題進(jìn)行切換。于是，寫一篇文章來記錄下 Vue 中實(shí)現(xiàn)換膚的過程，先看下效果吧。
本文主要分三部分：CSS 切換，圖標(biāo)切換和圖片切換。
CSS切換
關(guān)于 CSS 顏色的切換，我通過搜索，參考了ElementUI 的方案，總的來說分為四步
在 static 目錄下新建一個(gè) theme.css 文件，將需要替換的 CSS 聲明在此文件中
.side-bar {
background: linear-gradient(#B7A3FF, #879FFF) !important;
}
.side-bar .account-info {
background: #8981D8 !important;
}
聲明所有可選的主題，每種顏色都對(duì)應(yīng)于一個(gè)關(guān)鍵詞，方便區(qū)分
colors: [{
themeId: 1,
familyPrimary: '#B7A3FF',
familySecondary: '#879FFF',
sideBarTop: '#8981D8'
}, {
themeId: 2,
familyPrimary: '#FDC5C5',
familySecondary: '#F070A0',
sideBarTop: '#E7829F'
}, {
themeId: 3,
familyPrimary: '#414D6C',
familySecondary: '#2D1E3C',
sideBarTop: '#423C50'
}]
通過 AJAX 獲取 theme.css ，將顏色值替換為關(guān)鍵詞。
getFile(`/static/theme.css`)
.then(({data}) => {
let style = getStyleTemplate(data)
})
function getStyleTemplate (data) {
const colorMap = {
'#B7A3FF': 'familyPrimary',
'#879FFF': 'familySecondary',
'#8981D8': 'sideBarTop'
}
Object.keys(colorMap).forEach(key => {
const value = colorMap[key]
data = data.replace(new RegExp(key, 'ig'), value)
})
return data
}
把關(guān)鍵詞再換回剛剛生成的相應(yīng)的顏色值，并在頁面上添加 style 標(biāo)簽
getFile(`/static/theme.css`)
.then(({data}) => {
let style = getStyleTemplate(data)
writeNewStyle(style, this.color)
})
function writeNewStyle (originalStyle, colors) {
let oldEl = document.getElementById('temp-style')
let cssText = originalStyle
Object.keys(colors).forEach(key => {
cssText = cssText.replace(new RegExp(key, 'ig'), colors[key])
})
const style = document.createElement('style')
style.innerText = cssText
style.id = 'temp-style'
oldEl ? document.head.replaceChild(style, oldEl) : document.head.appendChild(style)
}
圖標(biāo)切換
由于項(xiàng)目剛開始做的時(shí)候并沒有考慮到換膚的需求，于是所有圖標(biāo)都是采用 img 標(biāo)簽的方式引用的，
<img src="../../assets/icon_edit.svg">
這樣就導(dǎo)致無法給 icon 動(dòng)態(tài)切換顏色了，所以，我決定改為 font 文件的方式來使用圖標(biāo)。這里推薦一個(gè)網(wǎng)站 icomoon ，這個(gè)網(wǎng)站可以輕松地將圖片轉(zhuǎn)換成 font 文件。圖標(biāo)也非常適合通過 font 的方式來使用，我們可以更加方便的修改圖標(biāo)的大小和顏色。
通過在線轉(zhuǎn)換，我們將下載下來的 font 文件放入項(xiàng)目中，并新建一個(gè) CSS 文件來聲明所有圖標(biāo)。
@font-face {
font-family: 'icomoon';
src: url('../assets/fonts/icomoon.eot?vpkwno');
src: url('../assets/fonts/icomoon.eot?vpkwno#iefix') format('embedded-opentype'),
url('../assets/fonts/icomoon.ttf?vpkwno') format('truetype'),
url('../assets/fonts/icomoon.woff?vpkwno') format('woff'),
url('../assets/fonts/icomoon.svg?vpkwno#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: sub;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-edit:before {
content: "\e900";
}
之后就能通過 CSS 類名的方式來引用圖標(biāo)了。
<span class="icon-edit"></span>
為了使主題生效，我們也需要把圖標(biāo)的 CSS 寫入 theme.css 文件中
.icon_edit:before {
background-image: linear-gradient(-135deg, #879FFF 0%, #B7A3FF 100%);
}
圖片切換
項(xiàng)目中還存在很多占位圖或者其他圖片會(huì)隨著主題的變化而變化。通過引入所有圖片，并用文件名來區(qū)分不同主題所對(duì)應(yīng)的圖片。在點(diǎn)擊切換主題時(shí)，切換到主題所對(duì)應(yīng)的文件，就能實(shí)現(xiàn)圖片切換了。為此，我寫了一個(gè) mixin，并在組件中引入 mixin。
<img :src="userImg || placeholderWoman">
placeholderMixin
let callback
const placeholderMixin = {
data () {
return {
placeholderWoman: '',
placeHolderNoReply: '',
placeHolderNothing: ''
}
},
created () {
let themeId = localStorage.getItem('themeId')
let theme = themeId2Name(themeId)
this.setThemeValue(theme)
callback = (theme) => {
this.setThemeValue(theme)
}
bus.$on('changeTheme', callback)
},
destroyed () {
bus.$off('changeTheme', callback)
},
methods: {
setThemeValue (theme) {
this.placeholderWoman = require(`@/assets/placeholder_woman_${theme}.svg`)
this.placeHolderNoReply = require(`@/assets/icon_noreply_${theme}.svg`)
this.placeHolderNothing = require(`@/assets/icon_nothing_${theme}.svg`)
}
}
}
在點(diǎn)擊切換主題時(shí)，會(huì)發(fā)射一個(gè) changeTheme 事件，各組件接收到 changeTheme 事件，就會(huì)為圖片重新賦值，也就達(dá)到了切換圖片的效果。
let theme = themeId2Name(this.themeId)
bus.$emit('changeTheme', theme)
這樣也就達(dá)到了切換主題的效果，但是這種方法需要在幾乎所有業(yè)務(wù)組件中引入 mixin，如果有更好的方法，歡迎與我交流。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 基于vue的換膚功能的示例代碼
- Vue + Scss 動(dòng)態(tài)切換主題顏色實(shí)現(xiàn)換膚的示例代碼
- Vue項(xiàng)目實(shí)現(xiàn)換膚功能的一種方案分析
- vue+iview+less 實(shí)現(xiàn)換膚功能
- 使用vue + less 實(shí)現(xiàn)簡單換膚功能的示例
- Vue中使用sass實(shí)現(xiàn)換膚功能
- vue實(shí)現(xiàn)換膚功能
- 基于Vue結(jié)合ElementUI的換膚解決方案
- vue項(xiàng)目實(shí)現(xiàn)一鍵網(wǎng)站換膚效果實(shí)例(webpack-theme-color-replacer的使用)
相關(guān)文章
vue組件（全局，局部，動(dòng)態(tài)加載組件）
組件是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼。這篇文章主要介紹了vue組件（全局，局部，動(dòng)態(tài)加載組件）,需要的朋友可以參考下2018-09-09
element-plus中el-table點(diǎn)擊單行修改背景色方法
這篇文章主要給大家介紹了關(guān)于element-plus中el-table點(diǎn)擊單行修改背景色的相關(guān)資料,這是產(chǎn)品新加了的一個(gè)需求,分享給同樣遇到這個(gè)需求的朋友,需要的朋友可以參考下2023-07-07
Vue實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法
下面小編就為大家分享一篇Vue實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
el-upload http-request使用 多個(gè)文件上傳攜帶其他參數(shù)方式
這篇文章主要介紹了el-upload http-request使用 多個(gè)文件上傳攜帶其他參數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章主要介紹了詳解Vue 2.0封裝axios筆記，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
Vue.js 如何添加全局常量或變量? 這是最近一個(gè)同事問的問題，發(fā)現(xiàn)很多朋友對(duì)這塊不熟悉，所以下面這篇文章主要給大家介紹了關(guān)于Vue中定義全局變量與常量的各種方式，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
vue render函數(shù)動(dòng)態(tài)加載img的src路徑操作
這篇文章主要介紹了vue render函數(shù)動(dòng)態(tài)加載img的src路徑操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue2?element?實(shí)現(xiàn)表格點(diǎn)擊詳情返回時(shí)保留查詢參數(shù)的示例代碼
這篇文章主要介紹了vue2?element?實(shí)現(xiàn)表格點(diǎn)擊詳情返回時(shí)保留查詢參數(shù)的示例代碼,本文通過圖文示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
vue中的數(shù)據(jù)格式化filters、formatter方式
這篇文章主要介紹了vue中的數(shù)據(jù)格式化filters、formatter方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了Vue scoped及deep使用方法解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08