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+element实现动态加载表单
Dec 13 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 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中文验证码实现示例分享
2014/01/12 PHP
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
ThinkPHP路由详解
2015/07/27 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
学前教育教师求职自荐信
2013/09/22 职场文书
汽车专业人才自我鉴定范文
2013/12/29 职场文书
美德好少年主要事迹
2014/01/29 职场文书
创建学习型党组织实施方案
2014/03/29 职场文书
环保建议书600字
2014/05/14 职场文书
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python