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-'+color
  console.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-'+color
  console.log(_color)
  this.$store.commit("setThemeColor",_color)

  this.$router.go(0)
}

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

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

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

vue element ui theme的那些事

猜你喜欢