vue实现换肤功能

elementui+less实现换肤功能效果图

iview+scss实现换肤功能效果图 

一：用elementui+less实现换肤功能

        1.新建color.less文件和theme.less文件，放置到assets/less文件夹中        

        

        2.color.less文件文件代码如下：        

@import url('./theme.less');
.themea {
    .theme();//默认的样式
}
.themeb {
    .theme(#409EFF,#fff);
}
.themec {
    .theme(#909399,#fff);
}

         3.theme.less文件文件代码如下：

.theme(@backcolor:#EEA2AD,@fcolor:#fff) {
    .header {
        color: @fcolor;
        background: @backcolor;
        width: 100%;
        height: 50px;
        position: relative;
        h4 {
            width: 100%;
            text-align: center;
            line-height: 50px;
            font-size: 15px;
        }
    }
}

        4.将color.less文件引入到main.js文件中

import "./assets/less/color.less";

        5.页面代码如下：

<template>
  <div class="skin-change">
    <div id="app">
      <div class="header">
        <h4>我是Header</h4>
      </div>
    </div>
    <div class="skin-button">
      <el-dropdown class="colorBtn" trigger="click" @command="changeColor">
        <span class="el-dropdown-link">换肤</span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="themea" @click="change_type(themea)">
            梦幻粉
          </el-dropdown-item>
          <el-dropdown-item command="themeb" @click="change_type(themeb)">
            天空蓝
          </el-dropdown-item>
          <el-dropdown-item command="themec" @click="change_type(themec)">
            雾霾灰
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
    if(localStorage.getItem('app')) {
      this.changeColor(localStorage.getItem('app'));
    } else {
      this.changeColor("themea");
    }
  },
  methods: {
    changeColor(command) {
      document.getElementById('app').className = command;
      this.localStorageDate();
    },
    localStorageDate(){
      localStorage.setItem('app',document.getElementById('app').className)
    }
  },
};
</script>

<style lang="less" scoped>
.skin-change {
  width: 100%;
  position: relative;
  .skin-button {
    position: absolute;
    right: 15px;
    top: 15px;
    .el-dropdown-link {
      display: inline-block;
      width: 50px;
      background: #fff;
    }
  }
}
</style>

二：用iview+scss实现换肤功能

        1.新建theme.scss文件，放置到assets/scss文件夹中

        

        2.theme.scss文件代码如下：

@charset "utf-8";
@mixin theme($backColor:#F56C6C,$fZColor:#fff){
    .commonBackColor {
        background: $backColor;
        color:$fZColor;
    }
}
.themea {
    @include theme(#F56C6C, #fff);
}
.themeb{
    @include theme(#E6A23C, #fff);
}
.themec{
    @include theme(#67C23A, #fff);
}

         3.将theme.scss引入到main.js文件中

import "./assets/scss/theme.scss";

         4.页面代码如下：

<template>
  <div>
    <div id="bookcaselist">
      <Dropdown>
        <a href="javascript:void(0)">
          一键换肤
          <Icon type="arrow-down-b"></Icon>
        </a>
        <DropdownMenu slot="list">
          <DropdownItem @click.native="changeTheme('themea')">
            红色
          </DropdownItem>
          <DropdownItem @click.native="changeTheme('themeb')">
            黄色
          </DropdownItem>
          <DropdownItem @click.native="changeTheme('themec')">
            绿色
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
    <div id="main">
      <div class="commonBackColor header">
        <h4>我是Header</h4>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  data() {
    return {
      title: '我的',
      showBack: false
    };
  },
  created() {},
  mounted() {
    this.changeTheme("themea");
  },
  methods: {
    changeTheme (theme) {
      document.getElementById('main').className = theme;
    },
  },
};
</script>

<style scoped>
p {
  cursor: pointer;
}
.header {
  height: 50px;
  line-height: 50px;
}
</style>