在vue中使用ElementUI实现主题切换,并给出具体例子
时间: 2023-04-11 08:00:33 浏览: 141
VUE项目实现主题切换的多种方法
5星 · 资源好评率100%
可以的,以下是一个简单的例子:
1. 在 main.js 中引入 ElementUI 和主题样式:
```
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
```
2. 在 App.vue 中添加一个切换主题的按钮:
```
<template>
<div>
<el-button @click="changeTheme">切换主题</el-button>
<router-view/>
</div>
</template>
<script>
export default {
methods: {
changeTheme() {
const body = document.getElementsByTagName('body')[0];
if (body.classList.contains('theme-dark')) {
body.classList.remove('theme-dark');
} else {
body.classList.add('theme-dark');
}
}
}
}
</script>
```
3. 在样式文件中定义两个主题样式:
```
/* light theme */
.el-button {
background-color: #409EFF;
color: #fff;
}
/* dark theme */
.theme-dark .el-button {
background-color: #303133;
color: #fff;
}
```
这样,当用户点击按钮时,页面的主题样式就会切换。
阅读全文