Vue項目如何實(shí)現(xiàn)切換主題色思路
Vue項目切換主題色思路
需求
用戶通過取色器選擇自己喜歡的顏色，替換項目中的主題色
實(shí)現(xiàn)效果
實(shí)現(xiàn)思路
在項目中使用的是less，使用@themeColor定義了主題色，便想著嘗試用js修改less的變量即可，但查詢了一下只知道有l(wèi)ess.modifyVars方法可以修改，但沒有詳細(xì)的說明，順便查到了可以修改js可以修改原生css的變量，而且簡單易懂，便嘗試使用css來定義主題色并設(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>
接下來便是怎么讓用戶能夠來修改這個主題色，首先想到這是一個全局的變量，在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)用戶修改顏色時，提交修改，修改state中的主題色
然后在App.vue中監(jiān)聽state中主題色的改變。
要是改變了，也就改變對應(yīng)css的主題色變量：
首先用computed計算屬性得到themeColor的值，然后使用watch監(jiān)聽，改變的話使用.setProperty方法修改。
最終達(dá)到效果。
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue Echarts實(shí)現(xiàn)柱形圖從右向左滾動效果
這篇文章主要為大家詳細(xì)介紹了Vue如何利用Echarts實(shí)現(xiàn)柱形圖從右向左滾動的效果，文中的示例代碼簡潔易懂，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-05-05
這篇文章主要介紹了基于mpvue的簡單彈窗組件mptoast使用詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了Vue傳遞參數(shù)不在URL路徑拼接顯示問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue實(shí)現(xiàn)仿淘寶結(jié)賬頁面實(shí)例代碼
本文是小編給大家分享的vue實(shí)現(xiàn)仿淘寶結(jié)賬頁面實(shí)例代碼，主要功能是仿照淘寶頁面的結(jié)算購物車商品時自動算出合計價格的頁面，具體實(shí)例代碼大家參考下本文2017-11-11
Vue的小伙伴們,困擾大家的IE瀏覽器支持Vue的問題,目前已經(jīng)找到了一個比較好的解決方案,下面這篇文章主要給大家介紹了關(guān)于vue項目兼容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個實(shí)用的JavaScript 工具函數(shù)助你提升開發(fā)效率
今天來看看JavaScript中的一些實(shí)用的工具函數(shù)，希望能幫助你提高開發(fā)效率！需要的朋友可以參考下面文章的具體內(nèi)容2021-10-10
輕量級富文本編輯器wangEditor結(jié)合vue使用方法示例
在我們項目中，有些時候需要使用富文本編輯器。本文將以百度開發(fā)的Ueditor結(jié)合Vue.js介紹一下。非常具有實(shí)用價值，需要的朋友可以參考下2018-10-10
這篇文章主要介紹了在vue里使用codemirror的兩種用法,每種方法通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
這篇文章主要介紹了前端vue如何使用高德地圖，幫助大家利用vue調(diào)用其他key，完成需求，感興趣的朋友可以了解下2020-11-11