vue项目前端切换主题,vue主题切换方案less
最近一直在做主题。我们的主题不是简单地改变颜色或排版，而是一个变化很大的主题。比如主题1和主题2看起来完全不一样，功能甚至不一样。这样的话，切换css是做不到的，所以我想了很久，用了以下两种方法。
目录
动态改变主题的第一种方法：动态组件的第二种方法，路由隔离的总结，基于css的另外两种方法：一套css方法和两个scss动态切换变量。
动态改变主题
首先要解决的是如何知道自己需要展示哪个主题，并且可以动态切换。我选择的方法是queryString。
我们打开网址的时候，可以把它贴在后面吗？主题=xx，就看这个xx，储存起来。
第一种办法：动态组件
当主题的路线没变，但是组件的风格和功能变了，我们可以再复制一个组件，修改后通过懒加载和动态组件来实现。
//页面组件
模板
差异
组件：is=themeName /
/div
/模板
脚本
导出默认值{
姓名：家，
组件：{
theme 1:()=import( @/theme/theme 1/a )，
theme 2:()=import( @/theme/theme 2/a )，
},
计算值：{
主题名(){
retun `theme${this。$store.state.themeId} `
}
}
}
/脚本
在组件中，我已经将脚本部分分离出来，因为大部分组件在逻辑上是相同的。即使有一些差异，我们也可以直接在主题2的组件中进行更改，以减少对主题1的影响。
//action.js
导出默认值{
名称：“主题1”，
.
}
模板
div class=theme1/div
/模板
脚本
导入动作自./component action/操作
action.name=Theme1
导出默认操作
/脚本
样式范围
/风格
这样就可以通过子组件的样式作用域来实现样式隔离，功能数据也会被隔离，比如两个子组件中的swiper就不会互相影响。同时，懒加载也降低了首页的加载量。后期再添加新的主题，也不过是画虎为猫而已。
第二种办法，路由隔离
实际上，路由隔离就是主题1写一个路由数组，主题2写一组路由。
//router.js
{
路径：“/theme3”，
名称：“主题3索引”，
组件：()=导入(./views/theme3/Index.vue )，
儿童：[
{
路径：“/theme3/entry”，
名称：“theme3Entry”，
组件：()=导入(./views/theme3/entry.vue )，
}
]
}
这种方法其实是上策。我用这个主要是因为路线变了。比如我之前直接去a.vue，现在前面多了一个入口页面，只能改路线。这种方法还可以实现更好的隔离。
总结
以上两个想法是我对我们目前业务的思考，仅供参考。
其实两种方法都有一个共同的问题，就是代码冗余。每个组件都不可避免地有前一个主题的代码的一部分。虽然大部分逻辑代码可以拉出来，但是css和template是拉不出来的。
如果每次都给一个主题添加一个dom和一个功能块，而且每次都用v-if的话，以后代码会更难维护。所以，我选择了按主题分代码。
额外补充基于css的两种方法
方法一 多套css
！-中心-
模板
获取动态父类名，并多次定义父类。
div:class= name
div class= switch v-on:click= Chang()
{{ className==box ？开灯:关灯 }}
/div
/div
/模板
脚本
导出默认值{
名称：“中心”，
data() {
返回{
类名：“盒子”
};
},
方法：{
//更改类
常(){
this.className===框
？(this.className=boxs )
:(this . class name=" box ")；
}
},
};
/脚本
样式lang=scss
当班级为包厢使用女巫的钢性铸铁
@import ./style/女巫。scss’；
当班级为盒子使用黑色的钢性铸铁
@import ./style/黑色。scss’；开关{
位置：固定；
top:4px；
右：10px
z指数：50;
宽度：60px
高度：60px
背景：# fff
行高：60px
边界半径：20%;
}
/风格
每个钢性铸铁文件样式大致相同，只是最外层的父级不一样，分别为。包厢和。盒子
方法二 scss动态切换变量
我自己是分为了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’；`,
},
},
},
公共风格。射流研究…
这个方法可以去修改定义变量定义的变量
文档。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%;
颜色：$字体颜色；
}
}
/风格
以上就是某视频剪辑软件实现主题切换的多种思路分享的详细内容，更多关于某视频剪辑软件主题切换的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。