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