基于element-ui 动态换肤的代码详解

基于element-ui动态换肤的代码详解，其实主要是通过更改CSS样式来实现主题颜色的更换。

首先，我们需要借助element-ui提供的主题生成工具element-theme来生成我们需要的主题样式文件。

生成主题样式文件的具体步骤如下：

1. 全局安装element-theme：

npm install element-theme -g

1. 在项目目录下新建theme文件夹，并在其中新建一个名为my-theme的文件夹，用于存放我们自定义的主题样式文件。

2. 在命令行中执行以下命令：

et -i

执行该命令后，会出现一个配置界面，我们需要按照要求进行配置，主要包括：

• Element-UI 版本号，如果不确定可以输入 1 自动检测；
• 主题名称，即my-theme；

• 主题颜色配置，包括主色、辅助色等；

• 配置完成后，运行以下命令生成主题样式文件：

et -o dist/my-theme

该命令会将生成的主题样式文件存放在dist/my-theme目录下。

接下来，我们开启动态换肤的过程。

1. 在main.js中引入element-theme的样式文件：

import 'element-theme-default'
import 'element-theme-default/lib/theme-chalk/index.css'
import './theme/my-theme/index.css'

其中，element-theme-default是element-ui默认主题的样式文件，index.css是我们自定义主题的样式文件。

1. 使用less或sass等CSS预处理器定义变量，用于控制主题的颜色：

// 定义主色
@primary-color: #409EFF;

// 定义辅助色
@success-color: #67c23a;
@warning-color: #e6a23c;
@error-color: #f56c6c;

需要注意的是，这里定义的变量名称必须和element-ui的变量名称保持一致，才能生效。

1. 在任意vue组件中引入我们定义的变量：

<style lang="less">
@import "~element-ui/packages/theme-chalk/src/common/var";
@import "@/less/variables";

.el-button--primary {
  background-color: @primary-color;
}
</style>

这里的@import语句用于引入element-ui的变量和我们自定义的变量。

1. 在任意组件中调用setThemeColor方法，动态修改主题颜色：

this.$setThemeColor({
  // 主色
  '@primary-color': '#67C23A',
  // 辅助色
  '@success-color': '#909399',
  '@warning-color': '#E6A23C',
  '@error-color': '#F56C6C',
})

这里需要注意的是，@setThemeColor方法是在Vue的prototype上定义的，因此我们在组件中可以直接通过this来调用该方法。

示例1： 使用element-theme自带的变量和组件

<template>
  <div>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    changeTheme() {
      this.$setThemeColor({
        '@primary-color': '#F56C6C',
        '@success-color': '#67C23A',
        '@warning-color': '#E6A23C',
        '@error-color': '#909399',
      })
    }
  }
}
</script>

<style lang="less">
@import "~element-theme-default";
</style>

示例2：自定义元素组件样式

<template>
  <div>
    <el-button class="my-button" type="primary">Primary</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    changeColor() {
      this.$setThemeColor({
        '@primary-color': '#F56C6C',
        '@success-color': '#67C23A',
        '@warning-color': '#E6A23C',
        '@error-color': '#909399',
      })
    }
  }
}
</script>

<style lang="less">
@import "~element-ui/packages/theme-chalk/src/common/var";
@import "@/less/variables";

.my-button {
  background-color: @primary-color;
}
</style>

这里通过定义自己的元素组件样式中传入颜色变量，实现主题变更。