vue中如何实现换肤？_vue 换肤

正文：上一篇文章给大家说道，css中"var()“和”:root的作用"，大家做了这么久的前端开发，是不是有时会遇到项目中会出现切换皮肤的需求，最常见的就是黑白皮肤切换了，是不是一有皮肤切换这种需求就让人很头疼，是不是还没有一个好的思路，那么废话不多说，直接上代码，最简单直观的皮肤切换

第一步
建立两个css文件夹放入static目录下，或者assets目录下，blue_reset.css文件我用作的是白皮肤，resets.css用作的是黑皮肤

这里定义的一些全局css属性，就是放到我们刚刚建立的两个文件夹里面，一套写白皮肤的样式，一套写黑皮肤的样式
:root {
  --background-color-base: #ffffff;
  --background-color-iphone: #e1e4f6;
  --background-color-secondary-base: #f4f4fb;
  --image-container-background-color: rgba(144, 144, 144, 0.5);
  --modal-title-background-color: #efefef;
  --small-title-gradient-background-color: linear-gradient(
    90deg,
    #efefef 0%,
    rgba(239, 239, 239, 0.36) 47%,
    rgba(239, 239, 239, 0) 100%
  );
  }

下面这个是使用方法
<style lang="scss" scoped>
	.label {
	     width: 65px;
	     margin-right: 16px;
	     display: inline-block;
	     text-align: right;
	     color: var(--background-color-base);
	     background:var(--background-color-iphone);
	 }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

第二步
main.js贴上以下代码

window.Skin = null

let mainStyle = 'blue'
if (Skin) {
  mainStyle = Skin === 'light' ? 'blue' : 'greyBlue'
}
// 动态插入主体样式表
const head = document.getElementsByTagName('HEAD').item(0)
var style = document.createElement('link')
style.id = 'rootStyle'
style.href = '/static/skin/' + mainStyle + '-min.css'
style.rel = 'stylesheet'
style.type = 'text/css'
head.appendChild(style)
const resetStyle = document.createElement('link')
resetStyle.href =
  mainStyle === 'greyBlue'
    ? '/static/css/reset.css'
    : '/static/css/blue_reset.css'
resetStyle.id = 'resetStyle'
resetStyle.rel = 'stylesheet'
resetStyle.type = 'text/css'
head.appendChild(resetStyle)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

第三步
vuex里面贴上以下代码

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

const state = {
  themeType: 'light',  // light默认白皮肤
}
const mutations = {
  upDateTheme(state, type) {
    state.themeType = type
    const rootStyle = document.getElementById('rootStyle')
    const resetStyle = document.getElementById('resetStyle')
    rootStyle.href = type === 'light' ? '/static/skin/blue-min.css' : '/static/skin/greyBlue-min.css'
    resetStyle.href = type === 'light' ? '/static/css/blue_reset.css' : '/static/css/reset.css'
  },

  
}

const store = new Vuex.Store({
    state,
    mutations,
});

export default store;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

第四步
我写了两个按钮，light是白色，dark是黑色，点击不同的按钮，把对应的参数传入vuex中，就可以实现换肤效果了

<template>
  <div class="peler">
    <div class="menuFu">
      <div class="btn"> 
        <el-button @click="fu('light')">换肤(默认)</el-button>
        <el-button @click="fu('dark')">换肤2</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{

    }
  },
  methods:{
    fu(type){
          this.$store.commit('upDateTheme',type)
        },

  },
  mounted(){
  }
}
</script>

<style lang="scss" scoped>
.peler{
  height: calc(100vh - 60px);
  font-size: 14px;
  color: white;
  .menuFu{
    margin: 0 auto;
    width: 300px;
    padding-top: 20px;
    .btn{
      text-align: center;
      margin-bottom: 40px;
    }
    .box{
      width: 200px;
      height: 200px;
      background: var(--gradient-color);
      margin: 0 auto;
      border-radius: 50%;
      text-align: center;
      line-height: 200px;
      animation: identifier 8s linear 2s infinite;
      &:hover{
        animation-play-state:paused;
      }
    }
    .boxTwo{
      width: 200px;
      height: 200px;
      text-align: center;
      line-height: 200px;
      background: var(--gradient-color);
      margin: 0 auto;
      animation: move 5s linear 2s infinite;
      &:hover{
        animation-play-state:paused;
      }
    }
  }



}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

每周一更，简单又实用，感谢支持