Vue項(xiàng)目如何實(shí)現(xiàn)切換主題色思路
Vue項(xiàng)目切換主題色思路
需求
用戶通過取色器選擇自己喜歡的顏色，替換項(xiàng)目中的主題色
實(shí)現(xiàn)效果
實(shí)現(xiàn)思路
在項(xiàng)目中使用的是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>
接下來便是怎么讓用戶能夠來修改這個(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)聽state中主題色的改變。
要是改變了，也就改變對(duì)應(yīng)css的主題色變量：
首先用computed計(jì)算屬性得到themeColor的值，然后使用watch監(jiān)聽，改變的話使用.setProperty方法修改。
最終達(dá)到效果。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目中使用rem,在入口文件添加內(nèi)容操作
這篇文章主要介紹了vue項(xiàng)目中使用rem,在入口文件添加內(nèi)容操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要給大家介紹了關(guān)于Vue-Router的相關(guān)資料,vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應(yīng)用,本文通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
vue中關(guān)于this.refs為空出現(xiàn)原因及分析
這篇文章主要介紹了vue中關(guān)于this.refs為空出現(xiàn)原因及分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
本篇文章主要介紹了Vue-Router模式和鉤子的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
vue 實(shí)現(xiàn)單選框設(shè)置默認(rèn)選中值
今天小編就為大家分享一篇vue 實(shí)現(xiàn)單選框設(shè)置默認(rèn)選中值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了vue增刪改查的簡單操作，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了Vue如何導(dǎo)出頁面為word格式問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue 中使用lodash對(duì)事件進(jìn)行防抖和節(jié)流操作
這篇文章主要介紹了Vue 中使用lodash對(duì)事件進(jìn)行防抖和節(jié)流操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue 解決移動(dòng)端彈出鍵盤導(dǎo)致頁面fixed布局錯(cuò)亂的問題
今天小編就為大家分享一篇vue 解決移動(dòng)端彈出鍵盤導(dǎo)致頁面fixed布局錯(cuò)亂的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue實(shí)現(xiàn)圖片滾動(dòng)的示例代碼(類似走馬燈效果)
下面小編就為大家分享一篇vue實(shí)現(xiàn)圖片滾動(dòng)的示例代碼(類似走馬燈效果)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03