目錄動態(tài)改變主題第一種辦法：動態(tài)組件第二種辦法，路由隔離總結(jié)額外補(bǔ)充基于css的兩種方法方法一 多套css方法二 scss動態(tài)切換變量動態(tài)改變主題

首先需要解決的是如何知道你需要顯示哪個(gè)主題，并且可以動態(tài)切換。我選擇的方法是queryString。

我們打開url的時(shí)候，可以在后面綴上?theme=xx,讀取這個(gè)xx儲存起來即可。

第一種辦法：動態(tài)組件

當(dāng)主題的路由并沒有發(fā)生變化，僅是組件內(nèi)部的樣式，功能發(fā)生了變化，我們可以將一個(gè)組件復(fù)制一遍，修改完后，通過懶加載和動態(tài)組件實(shí)現(xiàn)。

// 頁面組件<template> <div><component :is='themeName' /> </div></template><script> export default{name: ’Home’,components:{ theme1:()=>import(’@/theme/theme1/a’), theme2:()=>import(’@/theme/theme2/a’),},computed:{ themeName(){retun `theme${this.$store.state.themeId}` }} }</script>

在組件中，我將script部分抽離出來，因?yàn)榇蟛糠纸M件其實(shí)在邏輯上是相同。哪怕有一些不同，我們也可以直接在主題2的組件中更改，減少對主題1的影響。

//action.jsexport default{ name:’Theme1’, ....}<template><div class='theme1'></div></template><script> import action from ’../componentAction/action’ action.name=’Theme1’ export default action</script><style scoped></style>

這樣實(shí)現(xiàn)的有點(diǎn)是可以通過子組件的style scoped實(shí)現(xiàn)樣式隔離，同時(shí)功能數(shù)據(jù)上都會隔離，例如兩個(gè)子組件中的swiper不會相互影響。 同時(shí)，懶加載也減小了首頁的加載時(shí)體積。 后面再增加新增的主題也只是照貓畫虎而已。

第二種辦法，路由隔離

路由隔離其實(shí)就是簡單的theme1寫一個(gè)路由的數(shù)組，theme2寫一套路由。

// router.js{ path:’/theme3’, name:’theme3Index’, component: () => import(’../views/theme3/Index.vue’), children:[ {path: ’/theme3/entry’,name: ’theme3Entry’,component: () => import(’../views/theme3/entry.vue’), } ] }

這種辦法其實(shí)是下下之策，我使用這個(gè)主要是因?yàn)槁酚勺兓耍热缰笆侵苯舆M(jìn)入a.vue，但是現(xiàn)在前面多加了一層entry頁面，所以只能改變路由。 這種辦法也實(shí)現(xiàn)了比較好的隔離。

總結(jié)

以上兩種思路是我針對于我們當(dāng)前業(yè)務(wù)的思考，僅供參考。

其實(shí)這兩種方法都有一個(gè)共同的問題，就是代碼冗余。每個(gè)組件都避不可免的帶有一部分之前主題的代碼，雖然，大部分邏輯代碼可以抽離出來，但是css和template卻無法抽離。

如果每次一個(gè)主題增加一個(gè)dom,一個(gè)功能塊，如果每次都用v-if，那么其實(shí)代碼以后會更加難以維護(hù)。因此，我選擇了按照主題去劃分代碼。

額外補(bǔ)充基于css的兩種方法方法一 多套css

<!-- 中心 --><template> 動態(tài)獲取父級class名稱，進(jìn)行一個(gè)父級class的多次定義 <div :class='className'> <div v-on:click='chang()'> {{ className == 'box' ? '開燈' : '關(guān)燈' }} </div> </div></template><script>export default { name: 'Centre', data() { return { className: 'box' }; }, methods: { // 改變class chang() { this.className === 'box'? (this.className = 'boxs') : (this.className = 'box'); } },};</script><style lang='scss'>當(dāng)class為box 使用witch的css@import './style/witch.scss';當(dāng)class為boxs 使用black的css@import './style/black.scss';.switch { position: fixed; top: 4px; right: 10px; z-index: 50; width: 60px; height: 60px; background: #fff; line-height: 60px; border-radius: 20%;}</style>

每個(gè)css文件樣式大致相同，只是最外層的父級不一樣，分別為.box 和.boxs

方法二 scss動態(tài)切換變量

我自己是分為了2個(gè)主要文件來做的

_variable.scss 變量管理文件 var()為css3中提出的聲明樣式變量的方法 var(屬性名,屬性值)注意屬性值不能是字符串

// 主題切換$bgColor:var(--backgroundColor,rgb(255,255,255));$fontColor:var(--fonntColor,rgb(0,0,0));$bgmColor:var(--backgroundMColor,rgb(238,238,238));$tableColor:var(--tableColor,rgb(218,218,218));$borderColor:var(--borderColor,rgb(238,238,238));$tablesColor:var(--tablesColor,rgb(255,255,255));$inputColor:var(--inputColor,rgb(255,255,255))

創(chuàng)建的_variable.scss 文件我在vue.config.js進(jìn)行了一個(gè)全局的配置，沒有在組件中引入

css: { loaderOptions: { // 此文件為主題切換文件 sass: {prependData: `@import './src/styles/_variable.scss';`, }, }, },

publicStyle.js

這個(gè)方法可以去修改var定義的變量document.getElementsByTagName('body')[0].style.setProperty('屬性名', '替換的屬性值f');

// 主題切換const cut = (cutcheack) => { document.getElementsByTagName('body')[0].style.setProperty('--backgroundColor', cutcheack ? '#121212' : '#fff'); document.getElementsByTagName('body')[0].style.setProperty('--fonntColor', cutcheack ? '#cecece' : '#333'); document.getElementsByTagName('body')[0].style.setProperty('--backgroundMColor', cutcheack ? '#333' : '#eee'); document.getElementsByTagName('body')[0].style.setProperty('--tableColor', cutcheack ? '#000' : '#d8d8d8'); document.getElementsByTagName('body')[0].style.setProperty('--tablesColor', cutcheack ? '#222' : '#fff'); document.getElementsByTagName('body')[0].style.setProperty('--inputColor', cutcheack ? '#666' : '#fff'); document.getElementsByTagName('body')[0].style.setProperty('--borderColor', cutcheack ? '#666' : '#fff');};export default cut;

組件中使用

<!-- 首頁 --><template><div class=’home’> <el-switch v-model='cutcheack' active-color='#333' inactive-color='#13ce66' active-text='主題' @change='switchs'></el-switch></div></template><script>import cut from '../../utils/publicStyle.js';export default { name: 'Home', data() { return { cutcheack: false, //主題切換 }; }, methods: { // 左側(cè)導(dǎo)航隱藏或顯示 // 切換主題 switchs() { cut(this.cutcheack); }, },};</script><style lang=’scss’ scope>.home { height: 100%; width: 100%;background:$bgColor; .el-container {height: 100%;color:$fontColor; }}</style>

以上就是vue實(shí)現(xiàn)主題切換的多種思路分享的詳細(xì)內(nèi)容，更多關(guān)于vue 主題切換的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！