关键词

基于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>

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

本文链接:http://task.lmcjl.com/news/9390.html

展开阅读全文