點擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

經常用Element UI的小伙伴，應該知道，Element UI官方文檔，可以自由更換主題。那么，我們怎么把這個功能用到自己項目中呢？其實官方文檔也有所說明，這里對其進行更詳細，更明確的說明，同時提供簡單示例，供大家參考。

ColorPicker 顏色選擇器

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

...

使用也是非常簡單，下面我們能通過這個組件，改變全局的主題顏色

Vue + Vuex + Element UI動態全局主題顏色

1、封裝一個theme-picker組件

2、解析

監聽theme(顏色選擇器的值)，如果發生變化，通過getThemeCluster函數，計算一系列theme值相關主題顏色。

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

最后，創建一個style標簽，將新的主題樣式，寫入進去。所有Element UI相關組件主題顏色就會被替換。

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

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

Vuex + LocalStorage動態與Element UI組件無關主題顏色

上面代碼種，我們已經將，theme存儲了起來，如果有不會vuex + LocalStorage持久化狀態管理的小伙伴，可以點擊《Vuex+localStorage數據狀態持久化》，這里就不做過多的介紹了。

通過commit向store里面存儲顏色。

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

然后通過state獲取：

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

最后我們頁面可以直接使用themeColor

細心的小伙伴是不是發現這里過了一個變量backgroundColor，這個是通過themeColor重新計算的。

backgroundColor () { // 返回某個顏色的三原色 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) // 轉成rgba格式的，并添加透明度 return `rgba(${color[0]}, ${color[1]}, ${color[2]}, .3)` }

這樣就搞定了動態主題顏色，是不是很簡單了？迫不及待的想讓自己的項目也支持動態主題了吧，趕緊自己動手去試試吧。

推薦文章

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

Vuex+localStorage數據狀態持久化

喜歡小編或者覺得小編文章對你有幫助的，可以點擊一波關注哦！同時，要源碼的小伙伴可以點擊下方“了解更多”。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。