vue-cli4.X项目实现主题切换

我遇到的需求时做一个深色主题和浅色主题切换的一个效果

方法一 多套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个主要文件来做的

1. _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";`,       },     },   }, 

2. 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>