點選右上方紅色按鈕關注“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資料狀态持久化
喜歡小編或者覺得小編文章對你有幫助的，可以點選一波關注哦！同時，要源碼的小夥伴可以點選下方“了解更多”。