vue實現主題切換的多種思路分享
首先需要解決的是如何知道你需要顯示哪個主題，并且可以動態切換。我選擇的方法是queryString。
我們打開url的時候，可以在后面綴上?theme=xx,讀取這個xx儲存起來即可。
第一種辦法：動態組件當主題的路由并沒有發生變化，僅是組件內部的樣式，功能發生了變化，我們可以將一個組件復制一遍，修改完后，通過懶加載和動態組件實現。
// 頁面組件<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部分抽離出來，因為大部分組件其實在邏輯上是相同。哪怕有一些不同，我們也可以直接在主題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>
這樣實現的有點是可以通過子組件的style scoped實現樣式隔離，同時功能數據上都會隔離，例如兩個子組件中的swiper不會相互影響。 同時，懶加載也減小了首頁的加載時體積。 后面再增加新增的主題也只是照貓畫虎而已。
第二種辦法，路由隔離路由隔離其實就是簡單的theme1寫一個路由的數組，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’), } ] }
這種辦法其實是下下之策，我使用這個主要是因為路由變化了，比如之前是直接進入a.vue，但是現在前面多加了一層entry頁面，所以只能改變路由。 這種辦法也實現了比較好的隔離。
總結以上兩種思路是我針對于我們當前業務的思考，僅供參考。
其實這兩種方法都有一個共同的問題，就是代碼冗余。每個組件都避不可免的帶有一部分之前主題的代碼，雖然，大部分邏輯代碼可以抽離出來，但是css和template卻無法抽離。
如果每次一個主題增加一個dom,一個功能塊，如果每次都用v-if，那么其實代碼以后會更加難以維護。因此，我選擇了按照主題去劃分代碼。
額外補充基于css的兩種方法方法一 多套css<!-- 中心 --><template> 動態獲取父級class名稱，進行一個父級class的多次定義 <div :class='className'> <div v-on:click='chang()'> {{ className == 'box' ? '開燈' : '關燈' }} </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'>當class為box 使用witch的css@import './style/witch.scss';當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>
每個css文件樣式大致相同，只是最外層的父級不一樣，分別為.box 和.boxs
方法二 scss動態切換變量我自己是分為了2個主要文件來做的
_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))
創建的_variable.scss 文件我在vue.config.js進行了一個全局的配置，沒有在組件中引入
css: { loaderOptions: { // 此文件為主題切換文件 sass: {prependData: `@import './src/styles/_variable.scss';`, }, }, },
publicStyle.js
這個方法可以去修改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: { // 左側導航隱藏或顯示 // 切換主題 switchs() { cut(this.cutcheack); }, },};</script><style lang=’scss’ scope>.home { height: 100%; width: 100%;background:$bgColor; .el-container {height: 100%;color:$fontColor; }}</style>
以上就是vue實現主題切換的多種思路分享的詳細內容，更多關于vue 主題切換的資料請關注好吧啦網其它相關文章！
相關文章：
網公網安備