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

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

在项目的index.html文件中：

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

1
2

在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>
1
2
3
4
5
6
7
8
9

定义方法：

  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类名问题。
      	
    }

  },
1
2
3
4
5
6
7
8
9

store中新增themes.js文件：

export default {
    namespaced:true,
    state:{
        theme:'light',
    },
    actions:{

    },
    mutations:{
        CHANGE_THEME(state,data){
            state.theme = data;
        },
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在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`);
    }
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

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

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

@import './variable.scss';

@each $key,$value in $primary {
    .theme-#{$key} {
        background-color: $value;
    }
}
1
2
3
4
5
6
7

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

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

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

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