-----前端换肤----

------前端换肤------

1.前端的样式全局布局的情况下，通过定义全局变量统一底色，我是在app.vue中定义的色值:

<style>
  body {
    --generalcolor: #2441a2;
    --headerLeft: #1e3582;
  }
</style>

2.在需要换肤的点击事件那里:

data() {
    return {
      blueColor:{
        generalcolor: '#2441a2',
        headerLeft: '#1e3582'
      },
      yellowColor: {
        generalcolor: '#ffff00',
        headerLeft: '#c1c103',
      },
      redColor: {
        generalcolor: '#ff0000',
        headerLeft: '#c10000',
      }
    }
  }
  //这里是点击事件
changeColor(type) {
      console.log(type)
      let nowColor = {
        generalcolor: type.generalcolor,
        headerLeft: type.headerLeft
      }
      // type = JSON.parse(type);
      document.body.style.setProperty('--generalcolor',type.generalcolor)
      document.body.style.setProperty('--headerLeft',type.headerLeft)

		// 这里是存储到了本地localstroage中，防止刷新后的失效
      Vue.ls.set(NOW_COLOR, nowColor, 24 * 60 * 60 * 1000);
    },

3.最后，我是在vue的app.vue中初始化第一次加载的时候判断，是否本地存储中有色值，有的话调用覆盖:

//app.vue中
created () {
    if(Vue.ls.get(NOW_COLOR)) {
      	document.body.style.setProperty('--generalcolor',Vue.ls.get(NOW_COLOR).generalcolor)
  		document.body.style.setProperty('--headerLeft',Vue.ls.get(NOW_COLOR).headerLeft)
    }
  }

4.到这换肤功能就完成啦！！！！