基于element-ui动态换肤的代码详解,其实主要是通过更改CSS样式来实现主题颜色的更换。
首先,我们需要借助element-ui提供的主题生成工具element-theme来生成我们需要的主题样式文件。
生成主题样式文件的具体步骤如下:
element-theme
:npm install element-theme -g
在项目目录下新建theme
文件夹,并在其中新建一个名为my-theme
的文件夹,用于存放我们自定义的主题样式文件。
在命令行中执行以下命令:
et -i
执行该命令后,会出现一个配置界面,我们需要按照要求进行配置,主要包括:
1
自动检测;my-theme
;主题颜色配置,包括主色、辅助色等;
配置完成后,运行以下命令生成主题样式文件:
et -o dist/my-theme
该命令会将生成的主题样式文件存放在dist/my-theme
目录下。
接下来,我们开启动态换肤的过程。
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
是我们自定义主题的样式文件。
// 定义主色
@primary-color: #409EFF;
// 定义辅助色
@success-color: #67c23a;
@warning-color: #e6a23c;
@error-color: #f56c6c;
需要注意的是,这里定义的变量名称必须和element-ui的变量名称保持一致,才能生效。
<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的变量和我们自定义的变量。
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