vue+element-ui实现一键切换皮肤

element-ui可以自己定义主题并下载，选择好自己想要的主题，下载到本地。我下载了一套暗黑模式，一套默认的用来白天黑夜模式切换。
文件目录如下：

在项目的index.html文件中：

    <link rel="stylesheet" id="theme" href="">

在sideBar.vue页面中，新增下拉框选择模式：

    <el-dropdown @command="tabTheme" style="margin-right:20px"><span class="el-dropdown-link"><i class="el-icon-goods" style="fonr-size:18px;color:#fff;cursor:pointer" /></span><el-dropdown-menu slot="dropdown"><el-dropdown-item command="dark">dark</el-dropdown-item><el-dropdown-item command="light">light</el-dropdown-item></el-dropdown-menu></el-dropdown>

定义方法：

  methods:{tabTheme(val){let theme = this.$baseUrl + `static/themes/${val}/theme/index.css`;document.getElementById("theme").setAttribute("href",theme);this.$store.commit('themes/CHANGE_THEME',val)//把主题色放到vuex中，这里改变，同时响应式app.vue类改变，使用localStorage会发生在App.vue文件中不能响应式改变class类名问题。}},

store中新增themes.js文件：

export default {namespaced:true,state:{theme:'light',},actions:{},mutations:{CHANGE_THEME(state,data){state.theme = data;},}
}

在App.vue文件中：

  <div id="app" :class="'theme-' + theme" style="overflow-y: scroll;"><router-view :key="key"/></div>export default {computed: {key() {return this.$route.path + Math.random()},theme(){return this.$store.state.themes.theme;//响应式改变},},created(){let theme = this.$store.state.themes.theme;if(theme){document.getElementById("theme").setAttribute("href",this.$baseUrl + `static/themes/${theme}/theme/index.css`);}},
}

这里亲测可以实现，但是页面中还有一些需要自己定义样式覆盖的，需要根据当前的类型，分别书写不同的样式：
新增variable.scss：定义主题色：

$primary:(dark:#303133,light:#ffffff);

新增baseSet.scss使用@each 遍历：

@import './variable.scss';@each $key,$value in $primary {.theme-#{$key} {background-color: $value;}
}

然后把 baseSet.scss 引入 App.vue文件中：

  @import '../public/static/css/baseSet.scss';

至此完美实现，本地测试没有问题。

参考文章https://www.jianshu.com/p/199f450e1001，根据文章自己实现了一遍

vue+element-ui实现一键切换皮肤相关推荐

vue+element ui 设置页面全屏全屏和退出全屏的切换
vue+element ui 设置页面全屏全屏和退出全屏的切换方式1 screenfull 插件 // 属性 screenfull.isFullscreen; // 判断当前页是否全屏返回类型 ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
【vue开发问题-解决方法】（五）vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function
[vue开发问题-解决方法](五)vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function 参考文章: (1)[vue开发问题-解决方法](五) ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
VUE element ui 动态合并单元格问题
** VUE element ui 动态合并单元格问题** 1.基础方法 //最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下: //效果 //绑定 :span-me ...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...

vue+element-ui实现一键切换皮肤

vue+element-ui实现一键切换皮肤相关推荐

最新文章

热门文章