點(diǎn)擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來

前言

經(jīng)常用Element UI的小伙伴，應(yīng)該知道，Element UI官方文檔，可以自由更換主題。那么，我們?cè)趺窗堰@個(gè)功能用到自己項(xiàng)目中呢？其實(shí)官方文檔也有所說明，這里對(duì)其進(jìn)行更詳細(xì)，更明確的說明，同時(shí)提供簡(jiǎn)單示例，供大家參考。

ColorPicker 顏色選擇器

ColorPicker 顏色選擇器，是Element UI 提供的組件，我們可以直接使用。

...

使用也是非常簡(jiǎn)單，下面我們能通過這個(gè)組件，改變?nèi)值闹黝}顏色

Vue + Vuex + Element UI動(dòng)態(tài)全局主題顏色

1、封裝一個(gè)theme-picker組件

2、解析

監(jiān)聽theme(顏色選擇器的值)，如果發(fā)生變化，通過getThemeCluster函數(shù)，計(jì)算一系列theme值相關(guān)主題顏色。

getCSSString方法，是獲取遠(yuǎn)程(element ui提供)的主題css樣式文件。拿回來后，用updateStyle方法，把遠(yuǎn)程拉下來的樣式替換為我們自己重新計(jì)算的的顏色。

最后，創(chuàng)建一個(gè)style標(biāo)簽，將新的主題樣式，寫入進(jìn)去。所有Element UI相關(guān)組件主題顏色就會(huì)被替換。

但是如果是我們自定義的組件呢？顏色如何處理？

這里我們就用到了vuex + LocalStorage來管理，主題顏色值。

Vuex + LocalStorage動(dòng)態(tài)與Element UI組件無關(guān)主題顏色

上面代碼種，我們已經(jīng)將，theme存儲(chǔ)了起來，如果有不會(huì)vuex + LocalStorage持久化狀態(tài)管理的小伙伴，可以點(diǎn)擊《Vuex+localStorage數(shù)據(jù)狀態(tài)持久化》，這里就不做過多的介紹了。

通過commit向store里面存儲(chǔ)顏色。

this.$store.commit(types.M_THEME_COLOR, this.theme)

然后通過state獲取：

computed: { ...mapState({ themeColor: state => state.commons.themeColor }) },

最后我們頁(yè)面可以直接使用themeColor

細(xì)心的小伙伴是不是發(fā)現(xiàn)這里過了一個(gè)變量backgroundColor，這個(gè)是通過themeColor重新計(jì)算的。

backgroundColor () { // 返回某個(gè)顏色的三原色 const tintColor = (color) => { let red = parseInt(color.slice(0, 2), 16) let green = parseInt(color.slice(2, 4), 16) let blue = parseInt(color.slice(4, 6), 16) return [red, green, blue] } let color = this.themeColor.replace('#', '') color = tintColor(color) // 轉(zhuǎn)成rgba格式的，并添加透明度 return `rgba(${color[0]}, ${color[1]}, ${color[2]}, .3)` }

這樣就搞定了動(dòng)態(tài)主題顏色，是不是很簡(jiǎn)單了？迫不及待的想讓自己的項(xiàng)目也支持動(dòng)態(tài)主題了吧，趕緊自己動(dòng)手去試試吧。

推薦文章

Vuex是什么？Vuex能做什么？Vuex怎么使用？

Vuex+localStorage數(shù)據(jù)狀態(tài)持久化

喜歡小編或者覺得小編文章對(duì)你有幫助的，可以點(diǎn)擊一波關(guān)注哦！同時(shí)，要源碼的小伙伴可以點(diǎn)擊下方“了解更多”。

總結(jié)

以上是生活随笔為你收集整理的elementui :on-remove怎么用_Vue + Vuex + Element UI实现动态全局主题颜色的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。