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新手入门指导教程
Nov 18 Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
如何封装Vue Element的table表格组件
Feb 06 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
关于vue-router-link选择样式设置
Apr 30 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
php扩展ZF――Validate扩展
2008/01/10 PHP
php 破解防盗链图片函数
2008/12/09 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
Python编写百度贴吧的简单爬虫
2015/04/02 Python
详解Python的Django框架中的通用视图
2015/05/04 Python
python使用matplotlib画饼状图
2018/09/25 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
python获取linux系统信息的三种方法
2020/10/14 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
SQL中where和having的区别
2012/06/17 面试题
《燕子》教学反思
2014/02/18 职场文书
拔河比赛口号
2014/06/10 职场文书
司机岗位职责说明书
2014/07/29 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
个人委托书怎么写
2014/09/17 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
写给老师的保证书
2015/05/09 职场文书
繁星春水读书笔记
2015/06/30 职场文书
禁毒主题班会教案
2015/08/14 职场文书