今天就跟大家聊聊有关VUE项目中的主题怎么进行切换,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
方法一 多套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项目中的主题怎么进行切换有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。