介绍 & lt; !——,中心,——比;
& lt; template>
,动态获取父级类名称,进行一个父级类的多次定义
,& lt; div :类=癱lassName"比;
,& lt; div 类=皊witch", v:点击=癱hang()“比;
,,{{==,className “box", ?,“开灯”,:,“关灯,,}}
,& lt;/div>
,& lt;/div>
& lt;/template>
& lt; script>
export default {
,名字:“Centre",
,数据(){
,return {
名称:,才能“box"
,};
},
,方法:{
,//改变
,chang () {
this.className 才能;===,“box"
,,? (=this.className “boxs"),
,,:,(=this.className “box");
,}
},
}；
& lt;/script>
& lt; style lang=皊css"祝辞
当类为box 使用女巫的css
@import “。/风格/witch.scss";
当类为boxs 使用黑色的css
@import “。/风格/black.scss";
.switch {
位置:大敌;固定;
上图:大敌;4 px;
,右:10 px;
,z - index: 50;
,宽度:60 px;
,高度:60 px;
,背景:# fff;
,行高:60 px;
,这个特性:20%;
}
& lt;/style> //,主题切换
背景:美元var(写成backgroundColor, rgb (255255255));
美元fontColor: var (fonntColor, rgb (0, 0, 0));
$ bgmColor: var (backgroundMColor, rgb (238238238));
$ tableColor: var (tableColor, rgb (218218218));
$ borderColor: var (borderColor, rgb (238238238));
$ tablesColor: var (tablesColor, rgb (255255255));
美元inputColor: var (inputColor, rgb (255255255) , css:, {
,loaderOptions: {//才能,此文件为主题切换文件
sass才能:{
prependData才能:,“@import “。/src/风格/_variable.scss";”,
,,},
},
}, //,主题切换
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 减少; & lt; !——,首页,——比;
& lt; template>
& lt; div 类=& # 39;回家# 39;比;
& lt;才能el-switch v模型=癱utcheack",当前颜色=? 333“,inactive-color=? 13 ce66", active-text=爸魈狻?@change=皊witchs"祝辞& lt;/el-switch>
& lt;/div>
& lt;/template>
& lt; script>
import cut 得到“. ./. ./跑龙套/publicStyle.js";
export default {
,名字:“Home",
,数据(){
,return {
cutcheack才能:假的,,//主题切换
,};
},
,方法:{
,//左侧导航隐藏或显示
,//切换主题
,开关(),{
切才能(this.cutcheack);
},
},
}；
& lt;/script>
& lt; style lang=& # 39; scss # 39;, scope>
.home {
,高度:100%;
,宽度:100%;
背景:$背景;
,.el-container {
,,身高:100%;
颜色:才能fontColor美元;
,}
}
& lt;/style>
今天就跟大家聊聊有关VUE项目中的主题怎么进行切换,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
<强>方法一多套css
这个方法也是最简单,也是最无聊的。
每个css文件样式大致相同,只是最外层的父级不一样,分别为。盒子和。箱
方法二scss动态切换变量
我自己是分为了2个主要文件来做的
_variable。scss变量管理文件
var()为css3中提出的声明样式变量的方法
var(属性名,属性值)注意属性值不能是字符串
创建的_variable。scss文件我在vue.config。js进行了一个全局的配置,没有在组件中引入
2. publicstyle.js
这个方法可以去修改var定义的变量
document.getElementsByTagName (“body") [0] .style.setProperty(“属性名“,“替换的属性值f");
组件中使用
