一键换肤主题桌面，换肤大师如何一键换肤
一键更换主题主题查了挺多资料的有几种方法：
1：本地创建不同的scss文件 分别申明不同的变量。
2：利用scss混合器的监听属性来监听。
3：利用插件（这个方法比较复杂所以没去研究）
4：利用vuex 存一个颜色的值，在每个地方动态绑定（：style=\”{}\”）
这里面第一种跟第二种其实差不多，主要介绍下第二种
利用scss混合器的监听属性来监听
1.创建basic.scss，全局引入，配置vue.config.js
const path = require(\’path\’);module.exports = {chainWebpack: (config) => { const types = [\’vue-modules\’, \’vue\’, \’normal-modules\’, \’normal\’] types.forEach(type => addStyleResource(config.module.rule(\’scss\’).oneOf(type))) },}// 全局导入样式function addStyleResource(rule) { rule.use(\’style-resource\’) .loader(\’style-resources-loader\’) .options({ patterns: [ path.resolve(__dirname, \’./src/presentation/style/basic.scss\’), ], })}
2.basic.scss 变量申明以及监听属性
// 混合器// 主题色@mixin fontColor(){ color: $blue; [data-theme=\”71E5B9\”] & { color: #71E5B9 }}@mixin bgColor(){ background: $blue; [data-theme=\”71E5B9\”] & { background: #71E5B9 }}@mixin borderColor(){ border-color: $blue; [data-theme=\”71E5B9\”] & { border-color: #71E5B9 }}@mixin border(){ border:1px solid $blue; [data-theme=\”71E5B9\”] & { border:1px solid #71E5B9; }}
3.需要的地方注入就行了
.el-pagination.is-background .el-pager li:not(.disabled).active{ @include bgColor()}
4.改变主题色
document.documentElement.setAttribute(\”data-theme\”,\”71E5B9\”)
5：注意：这个方法有局限性，就是样式不支持自定义选择，得提前写好几种
39338726
《一键换肤主题桌面，换肤大师如何一键换肤》来自互联网同行内容，若有侵权，请联系我们删除！
科技资讯SEO上一篇 : 小软为何突然停止直播？
下一篇 : 如何在网页版虎牙上开启剑士功能？
-
SEO外包最佳选择国内专业的白帽SEO机构，熟知搜索算法，各行业企业站优化策略！
SEO公司
-
可定制SEO优化套餐基于整站优化与品牌搜索展现，定制个性化营销推广方案！
SEO套餐
-
SEO入门教程多年积累SEO实战案例，从新手到专家，从入门到精通，海量的SEO学习资料！
SEO教程
-
SEO项目资源高质量SEO项目资源，稀缺性外链，优质文案代写，老域名提权，云主机相关配置折扣！
SEO资源
-
SEO快速建站快速搭建符合搜索引擎友好的企业网站，协助备案，域名选择，服务器配置等相关服务！
SEO建站
-
快速搜索引擎优化建议没有任何SEO机构，可以承诺搜索引擎排名的具体位置，如果有，那么请您多注意！专业的SEO机构，一般情况下只能确保目标关键词进入到首页或者前几页，如果您有相关问题，欢迎咨询！
