Vue項(xiàng)目如何實(shí)現(xiàn)切換主題色思路
Vue項(xiàng)目切換主題色思路
需求
用戶通過(guò)取色器選擇自己喜歡的顏色，替換項(xiàng)目中的主題色
實(shí)現(xiàn)效果
實(shí)現(xiàn)思路
在項(xiàng)目中使用的是less，使用@themeColor定義了主題色，便想著嘗試用js修改less的變量即可，但查詢了一下只知道有l(wèi)ess.modifyVars方法可以修改，但沒(méi)有詳細(xì)的說(shuō)明，順便查到了可以修改js可以修改原生css的變量，而且簡(jiǎn)單易懂，便嘗試使用css來(lái)定義主題色并設(shè)置修改。
首先在App.vue中設(shè)置主題色：
<style lang="less">
#app {
--themeColor:#008cff;
}
</style>和使用less并不沖突，使用--定義變量有自己的作用域，所以最好在根目錄定義，這里我選擇App.vue的#app父容器中定義。
定義好之后怎么使用呢，只需要在子組件的style中使用var(--themeColor)即可使用。
<style lang="less">
.z-header-container {
width: 100%;
height: 66px;
//background: #fff;
text-align: center;
background: var(--themeColor);
}
</style>
接下來(lái)便是怎么讓用戶能夠來(lái)修改這個(gè)主題色，首先想到這是一個(gè)全局的變量，在vue中管理全局變量自然是使用vuex
在store文件中定義好themeColor變量，以及修改它的方法changeThemeColor。
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state:{
themeColor: "#008cff"
},
mutations:{
changeThemeColor(state,val){
state.themeColor = val;
}
}
})
export default store;在main.js中引入store
然后在頭部組件中使用elementUI的顏色選擇器，當(dāng)用戶修改顏色時(shí)，提交修改，修改state中的主題色
然后在App.vue中監(jiān)聽(tīng)state中主題色的改變。
要是改變了，也就改變對(duì)應(yīng)css的主題色變量：
首先用computed計(jì)算屬性得到themeColor的值，然后使用watch監(jiān)聽(tīng)，改變的話使用.setProperty方法修改。
最終達(dá)到效果。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue Echarts實(shí)現(xiàn)柱形圖從右向左滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了Vue如何利用Echarts實(shí)現(xiàn)柱形圖從右向左滾動(dòng)的效果，文中的示例代碼簡(jiǎn)潔易懂，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-05-05
基于mpvue的簡(jiǎn)單彈窗組件mptoast使用詳解
這篇文章主要介紹了基于mpvue的簡(jiǎn)單彈窗組件mptoast使用詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
Vue傳遞參數(shù)不在URL路徑拼接顯示問(wèn)題
這篇文章主要介紹了Vue傳遞參數(shù)不在URL路徑拼接顯示問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue實(shí)現(xiàn)仿淘寶結(jié)賬頁(yè)面實(shí)例代碼
本文是小編給大家分享的vue實(shí)現(xiàn)仿淘寶結(jié)賬頁(yè)面實(shí)例代碼，主要功能是仿照淘寶頁(yè)面的結(jié)算購(gòu)物車商品時(shí)自動(dòng)算出合計(jì)價(jià)格的頁(yè)面，具體實(shí)例代碼大家參考下本文2017-11-11
Vue的小伙伴們,困擾大家的IE瀏覽器支持Vue的問(wèn)題,目前已經(jīng)找到了一個(gè)比較好的解決方案,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目兼容IE瀏覽器的教程步驟,需要的朋友可以參考下2023-03-03
Vite3結(jié)合Svelte3使用@import導(dǎo)入scss樣式
這篇文章主要為大家介紹了Vite3結(jié)合Svelte3使用@import導(dǎo)入scss樣式實(shí)現(xiàn)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
56個(gè)實(shí)用的JavaScript 工具函數(shù)助你提升開(kāi)發(fā)效率
今天來(lái)看看JavaScript中的一些實(shí)用的工具函數(shù)，希望能幫助你提高開(kāi)發(fā)效率！需要的朋友可以參考下面文章的具體內(nèi)容2021-10-10
輕量級(jí)富文本編輯器wangEditor結(jié)合vue使用方法示例
在我們項(xiàng)目中，有些時(shí)候需要使用富文本編輯器。本文將以百度開(kāi)發(fā)的Ueditor結(jié)合Vue.js介紹一下。非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-10-10
這篇文章主要介紹了在vue里使用codemirror的兩種用法,每種方法通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
這篇文章主要介紹了前端vue如何使用高德地圖，幫助大家利用vue調(diào)用其他key，完成需求，感興趣的朋友可以了解下2020-11-11