思路: Less / Sass / Stylus , 定义多种皮肤对应的方法, 点击皮肤颜色, 切换最外层 div#App 的 class, 来实现换肤.
App.vue
- <template>
- <div id="App" :class="currentSkin">
- <h1>title</h1>
- <div class="skins">
- <span v-for="i in skins" :class="i" @click="changeSkin(i)"></span>
- </div>
- </div>
- </template>
- <script>
- import { mapState } from 'vuex';
- export default {
- name: 'App',
- computed:{
- ...mapState(['skins','currentSkin'])
- },
- methods:{
- changeSkin(val){
- this.$store.commit("setSkin","theme-"+val);
- }
- }
- }
- </script>
- <style lang="Less">
- @import './assets/CSS/style.Less';
- .theme-default{
- .theme();
- }
- .theme-blue{
- .theme(#fff,blue);
- }
- .theme-green{
- .theme(#fff,green);
- }
- .skins{
- position: absolute;
- top: 15px;
- right: 20px;
- }
- .skins span{
- display: inline-block;
- width: 12px;
- height: 12px;
- margin-right: 6px;
- }
- .default{
- background: lightgrey;
- }
- .blue{
- background: blue;
- }
- .green{
- background: green;
- }
- </style>
- store> index.JS
- import Vue from "vue"
- import Vuex from "vuex"
- Vue.use(Vuex)
- const store = new Vuex.Store({
- state: {
- currentSkin: "theme-default",
- skins: ["default", "blue", "green"]
- },
- mutations: {
- setSkin(state, flag) {
- state.currentSkin = flag
- }
- }
- })
- export default store
- assets> CSS> style.Less
- .theme(@backcolor:#EEA2AD,@fcolor:#000){
- h1{
- color:@fcolor;
- }
- }
来源: http://www.qdfuns.com/article/25669/64dbbe6d3e0d158153a1f4c4ba489d0e.html