vue實現主題切換的多種思路分享

Posted on by

動態改變主題

首先需要解決的是如何知道你需要顯示哪個主題，並且可以動態切換。我選擇的方法是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.js
export 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 class="switch" 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 主題切換的資料請關註WalkonNet其它相關文章！

推薦閱讀：