當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

elementui :on-remove怎么用_Vue + Vuex + Element UI实现动态全局主题颜色

發(fā)布時(shí)間：2025/1/21 vue 64 豆豆

生活随笔收集整理的這篇文章主要介紹了 elementui :on-remove怎么用_Vue + Vuex + Element UI实现动态全局主题颜色小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

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

前言

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

ColorPicker 顏色選擇器

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

...

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

Vue + Vuex + Element UI動態(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)組件主題顏色就會被替換。

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

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

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

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

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

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

然后通過state獲取：

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

最后我們頁面可以直接使用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)` }

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

生活随笔