VUE项目实现主题切换的多种方法_JavaScript

VUE项目实现主题切换的多种方法

2021-11-24 16:14啊-苏 JavaScript

这篇文章主要介绍了VUE项目实现主题切换的方法，本文通过多种方法给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

需求是做一个深色主题和浅色主题切换的效果

方法一多套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";`,

									 },

									},

									},

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>