时间:2021-05-26
需求是 做一个深色主题和浅色主题切换的效果
方法一 多套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(属性名,属性值)注意属性值不能是字符串
创建的_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");
组件中使用
<!-- 首页 --><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项目实现主题切换的文章就介绍到这了,更多相关VUE 实现主题切换内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
使用vue开发项目,用到elementUI,根据官网的写法,我们可以自定义主题来适应我们的项目要求,下面来介绍一下两种方法实现的具体步骤,(可以参考官方文档自定
在基于vue-cli项目开发过程中,多语言切换功能可使用vue-i18插件,具体实现方法如下:step1:在项目中安装vue-i18插件cnpminstallv
前言有些项目我们需要支持多种语言切换,满足国际化需求。vue-i18n是一个vue插件,主要作用就是让项目支持国际化多语言,使用方便快捷,能很轻松的将我们的项目
最近公司做的项目得到一个网站换肤的需求,也就是切换主题。那么如何切换主题色呢?切换主题色其实就是切换CSS,然而在项目中不仅只有CSS需要换肤,图标和图片也需要
需求公司项目需要国际化,点击按钮切换中文/英文1、安装npminstallvue-i18n--save2、注入vue实例中,项目中实现调用api和模板语法imp