vue 切换主题,vue主题切换方案less
这篇文章主要介绍了VUE项目实现主题切换的方法，本文通过多种方法给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
需求是做一个深色主题和浅色主题切换的效果
方法一 多套css
这个方法也是最简单，也是最无聊的。
！-中心-
模板
动态获取父级班级名称，进行一个父级班级的多次定义
div:class= name
div class= switch v-on:click= Chang()
{{ className==box ？开灯 : 关灯 }}
/div
/div
/模板
脚本
导出默认值{
名称："中心",
data() {
返回{
类名："盒子"
};
},
方法：{
//改变班级
常(){
this.className===框
？(this.className=boxs )
:(这个。class name=" box ")；
}
},
};
/脚本
样式lang=scss
当班级为包厢使用女巫的钢性铸铁
@import ./style/女巫。scss’；
当班级为盒子使用黑色的钢性铸铁
@import ./style/黑色。scss’；开关{
位置：固定；
top:4px；
右：10px
z指数：50;
宽度：60px
高度：60px
背景：# fff
行高：60px
边界半径：20%;
}
/风格
每个钢性铸铁文件样式大致相同，只是最外层的父级不一样，分别为。包厢和。盒子
方法二半导体色敏传感器动态切换变量
我自己是分为了2个主要文件来做的
_变量。半导体色敏传感器变量管理文件
风险值()为css3中提出的声明样式变量的方法
风险值（属性名，属性值)注意属性值不能是字符串
//主题切换
$bgColor:var( - backgroundColor，rgb(255，255，255))；
$ font color:var(-fontColor，rgb(0，0，0))；
$ bgm color:var(-背景m色，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))
创建的_变量。半导体色敏传感器文件我在vue。配置。射流研究…进行了一个全局的配置，没有在组件中引入
css: {
loaderOptions: {
//此文件为主题切换文件
萨斯：{
前置数据：` @import ./src/styles/_变量。scss’；`,
},
},
},
公共风格. js
这个方法可以去修改定义变量定义的变量
文档。getelementsbytagname( body )[0]。风格。设置属性(属性名, 替换的属性值f’)；
//主题切换
const cut=(cutcheack)={
文档。getelementsbytagname( body )[0]。风格。设置属性(-背景色)，cutcheack？# 121212 : # fff )；
文档。getelementsbytagname( body )[0]。风格。设置属性(-fontcolor)，cutcheack？# cece ce : # 333 )；
文档。getelementsbytagname( body )[0]。风格。设置属性(-background mcolor)，cutcheack？# 333 : # eee )；
文档。getelementsbytagname( body )[0]。风格。设置属性(-表格颜色)，cutcheack？# 000 : # d8d 8 )；
文档。getelementsbytagname( body )[0]。风格。设置属性(-表格颜色)，cutcheack？# 222 : # fff )；
文档。getelementsbytagname( body )[0]。风格。设置属性(-输入颜色)，cutcheack？# 666 : # fff )；
文档。getelementsbytagname( body )[0]。风格。设置属性(-边框颜色)，cutcheack？# 666 : # fff )；
};
导出默认切割；
组件中使用
！-首页-
模板
div class=home
埃尔开关v-model= cutcheack active-color= # 333 inactive-color= # 13ce 66 active-text=主题@change=switchs/el-switch
/div
/模板
脚本
"导入剪切自"././utils/公共样式。js’；
导出默认值{
姓名：家，
data() {
返回{
cutcheack: false，//主题切换
};
},
方法：{
//左侧导航隐藏或显示
//切换主题
开关(){
切(这个。cutcheack)；
},
},
};
/脚本
样式lang=scss 范围。主页{
身高：100%;
宽度：100%;
背景：$ bgColor。埃尔-容器{
身高：100%;
颜色：$字体颜色；
}
}
/风格
这就是这篇关于VUE项目主题切换的文章。更多有关VUE主题切换的内容，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。