vue element ui theme的那些事

首先能看官网描述就先看官网

http://element-cn.eleme.io/#/zh-CN/component/custom-theme

跟着操作基本上你就可以获得下图的文件

gulp-css-wrap工具的使用，可以看下文，笔者是照着模范的

https://blog.csdn.net/young_emily/article/details/78596219

基本能达到自己的目的：就是将多份不同的样式，每个选择器加上（.XXX）用于区分，因为我们后面将所有的样式都引入到项目中。

上面链接中的有个位置需要注意，如下图：

使用cmd输入gulp出现类似“未知命令的错误”，此时只需要使用 -g全局安装即可。

例子中我们做这样的测试：

element-variables.scss （前面官网的操作中会提到，务必先看官网）中修改如下位置，然后生成一份样式

同理再生成一份，修改值为gred，最后形成如下图所示

index.css如下图所示，效果如下

注：fonts需要在下图中拷贝过去

关于引入

//默认的，官网提供的样式引入
// import 'element-ui/lib/theme-chalk/index.css';
//自定义的样式，也就是我们修改后编译出来的。
import '../theme/index.css'    注：效果已经出来了，引入的就是使用我们之前的那个修改green/red的文件编译后的样式。简单地说就是我们成功修改了样式。

测试方法可以使用

<el-button type="primary">主要按钮</el-button> 反正我使用该按钮效果是出来了。

本文的重点来了：我们有了多份样式文件，我们每个样式文件里的选择器都加了区分，我们要用户选择使用哪个样式

具体区分在例子中的体现是：

.custom-pbtn-green 与.custom-pbtn-red的区别

此时同时引入所有样式文件

import '@/assets/css/theme/PBtnRed/index.css'
import '@/assets/css/theme/PBtnGreen/index.css'

一个测试组件的<template>部分用于测试

<div  :class="[btnColorClass]"><span>{{btnColorClass}}</span><el-button @click="changeColor('red')">红色按钮</el-button><el-button @click="changeColor('green')">绿色按钮</el-button><el-button type="primary">主要按钮</el-button>
</div>

点击不同的按钮实现切换颜色，主要按钮即是测试观察的按钮，红色按钮和绿色按钮都是用于点击分别切换主要按钮颜色对应的按钮。

思路是：官网https://cn.vuejs.org/v2/guide/class-and-style.html提供了很多方法修改样式，试着将

修改这个body的样式，为其class添加.custom-pbtn-green 或者.custom-pbtn-red，试想当我们引入了多套样式，如果此时body添加的.custom-pbtn-green,自行添加的选择器为.custom-pbtn-green则可以选中，对应的样式也就可以生效，那其他样式（例子中的.custom-pbtn-red）则不能生效，那岂不是达到我们想要的效果了。

document.getElementsByTagName('body')[0].className ='XXXXXX'就可以达到我们想要的效果。

该代码需要写在什么地方值得考究，如果将代码写在该部位，变量放在data（）{return {XXX:XXX}}中会出现，当初始值颜色设置好后，调用下面方法修改，并不会影响到dom，也就是该class值没有在html中生效。此时你可能想到刷新页面，刷新后，data中的该变量值又重新是初始值。

changeColor:function(color){}

此时你可能想到我们将该class键值对（也就是变量=.custom-pbtn-green‘’）存到第三方处，想想可能会想到存到vuex‘仓库’中，所以代码如下：

computed:{btnColorClass:function () {return this.$store.state.themeColor}
},

使用计算属性，使用store中的值。

changeColor:function(color){let _color='custom-pbtn-'+colorconsole.log(_color)this.$store.commit("setThemeColor",_color)
}

通过点击监听方法修改store中的变量值。

store代码如下所示：

import Vue from 'vue';
import Vuex from 'vuex';
import index from "../router";
Vue.use(Vuex);
const store = new Vuex.Store({  state:{themeColor:'custom-pbtn-red'},mutations:{setThemeColor(state,color){state.themeColor=color}}
})
export {store}

记得在main.js中引入

基本上，我们就可以通过vuex中存储的hemeColor来存我们的字符串.custom-pbtn-green 或者.custom-pbtn-red了，

理想很丰满，显示很骨感，此时启动项目，运行发现可以通过点击红色按钮和绿色按钮切换主要按钮的颜色，好像很满意，但是此时如果你刷新页面，vuex中的变量又回到初始值，也就是说我选择了绿色作为主题，我无意中一刷新页面，主题又变成了红色，强迫症会很反感，所以我们需要让刷新影响不到变量值。

所以在页面创建前就要获取到值，而且值存储位置是不为刷新所影响的。可以存本地也可以存服务器，根据需求而定，主题跟机器就本地，主题更账号就跟服务器。

建议本地：可用技术localStorage、sessionStorage

下面是百度来的一小段

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

在此我找到一小段代码，修改后测试（代码使用sessionStorage）：

created(){//  页面加载时读取sessionStorage里的状态信息if(sessionStorage.getItem("themeColor")){this.$store.replaceState(Object.assign({},this.$store.state,JSON.parse(sessionStorage.getItem("themeColor"))))}//页面刷新时将vuex里的信息保存到sessionStoreage里window.addEventListener("beforeunload",()=>{sessionStorage.setItem('themeColor',JSON.stringify(this.$store.state))})
}

注：vue的生命周期、钩子函数等等是必须要理解的，

https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

下面是我看过的一篇文章，可以参考下

https://segmentfault.com/a/1190000008010666

并加入修改后刷新页面

//切记不能使用（）=》{}不然就是commit is not defined  我测试期间出现的错，自行判断，笔者暂时还不理解
changeColor:function(color){let _color='custom-pbtn-'+colorconsole.log(_color)this.$store.commit("setThemeColor",_color)  this.$router.go(0)
}

现在的效果就是，修改主题后刷新页面不该变主题，还是自己修改的那个主题，但是关闭页面就回到默认主题。

前面的文字只是为了显示观察罢了。

到现在，该说的都说了，这就是我对element自定义主题以及主题修改的理解，参考了很多资料，也算是有些收获，希望给读者带来一些帮助。

vue element ui theme的那些事相关推荐

【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
基于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 theme的那些事

vue element ui theme的那些事相关推荐

最新文章

热门文章