本篇文章主要介紹了Vue 換膚的範例實踐,現在分享給大家,也給大家做個參考。
最近公司做的專案得到一個網站換膚的需求,也就是切換主題。那麼如何切換主題色呢?切換主題色其實就是切換 CSS,然而在專案中不僅只有 CSS 需要換膚,圖示和圖片也需要跟著主題切換。於是,寫一篇文章來記錄 Vue 中實現換膚的過程,先看下效果吧。
本文主要分成三部分:CSS 切換,圖示切換和圖片切換。
CSS切換
關於CSS 顏色的切換,我透過搜索,參考了ElementUI 的方案,總的來說分為四步
在static 目錄下新建一個theme.css 文件,將需要替換的CSS 聲明在此文件中
.side-bar { background: linear-gradient(#B7A3FF, #879FFF) !important; } .side-bar .account-info { background: #8981D8 !important; }
聲明所有可選的主題,每種顏色都對應於一個關鍵字,方便區分
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 ,將顏色值替換為關鍵字。
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 }
把關鍵字再換回剛剛產生的對應的顏色值,並在頁面上加上style 標籤
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) }
圖示切換
由於專案剛開始做的時候並沒有考慮到換膚的需求,於是所有圖標都是採用img 標籤的方式引用的,
<img src="../../assets/icon_edit.svg">
這樣就導致無法給icon 動態切換顏色了,所以,我決定改為font 檔案的方式來使用圖示。這裡推薦一個網站 icomoon ,這個網站可以輕鬆地將圖片轉換成 font 檔案。圖示也非常適合透過 font 的方式來使用,我們可以更方便的修改圖示的大小和顏色。
透過線上轉換,我們將下載下來的 font 檔案放入專案中,並新建一個 CSS 檔案來宣告所有圖示。
@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 類別名稱的方式來引用圖示了。
<span class="icon-edit"></span>
為了讓主題生效,我們也需要把圖示的CSS 寫入theme.css 檔案中
.icon_edit:before { background-image: linear-gradient(-135deg, #879FFF 0%, #B7A3FF 100%); }
圖片切換
專案中還存在著許多佔位圖或其他圖片會隨著主題的變化而改變。透過引入所有圖片,並用檔案名稱來區分不同主題所對應的圖片。點擊切換主題時,切換到主題所對應的文件,就能實現圖片切換了。為此,我寫了一個 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`) } } }
在點擊切換主題時,會發射一個 changeTheme 事件,各元件接收到 changeTheme 事件,就會為圖片重新賦值,也就達到了切換圖片的效果。
let theme = themeId2Name(this.themeId) bus.$emit('changeTheme', theme)
這樣也就達到了切換主題的效果,但是這種方法需要在幾乎所有業務組件中引入 mixin,如果有更好的方法,歡迎與我交流。
上面是我整理給大家的,希望今後對大家有幫助。
相關文章:
#以上是有關Vue中如何換膚?的詳細內容。更多資訊請關注PHP中文網其他相關文章!