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


Posted in Vue.js onNovember 26, 2020

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

方法一 多套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>

到此这篇关于VUE项目实现主题切换的文章就介绍到这了,更多相关VUE 实现主题切换内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue $router和$route的区别详解
Dec 02 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
vue使用element-ui实现表单验证
Dec 13 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 #Vue.js
vue实现广告栏上下滚动效果
Nov 26 #Vue.js
Vue组件生命周期运行原理解析
Nov 25 #Vue.js
vue element-ul实现展开和收起功能的实例代码
Nov 25 #Vue.js
在Vue中使用mockjs代码实例
Nov 25 #Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 #Vue.js
Vue使用Element实现增删改查+打包的步骤
Nov 25 #Vue.js
You might like
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
js实现简单的计算器功能
2017/01/16 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
Python实现随机漫步功能
2018/07/09 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
Java的五个基础面试题
2016/02/26 面试题
DataReader和DataSet的异同
2014/12/31 面试题
毕业生物理教师求职信
2013/10/17 职场文书
中层干部培训方案
2014/06/16 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
作风建设剖析材料
2014/10/06 职场文书
大学四年个人总结
2015/03/03 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
初一语文教学反思
2016/03/03 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫
windows server2008 开启端口的实现方法
2022/06/25 Servers
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android