如何在vue中使用elementUI切换主题,给出具体例子
时间: 2023-04-09 22:04:01 浏览: 532
可以使用ElementUI提供的el-theme-changer组件来切换主题。具体步骤如下:
1. 在main.js中引入ElementUI和主题文件:
```
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './assets/theme/theme1.css'; // 引入主题文件
Vue.use(ElementUI);
```
2. 在App.vue中使用el-theme-changer组件:
```
<el-theme-changer></el-theme-changer>
```
3. 在主题文件中定义不同的样式:
```
/* theme1.css */
/* 主题1 */
.el-button {
background-color: #409EFF;
color: #fff;
}
.el-input {
border-color: #409EFF;
}
```
```
/* theme2.css */
/* 主题2 */
.el-button {
background-color: #67C23A;
color: #fff;
}
.el-input {
border-color: #67C23A;
}
```
4. 在el-theme-changer组件中设置不同的主题文件路径:
```
<el-theme-changer
:themes="[
{ name: '主题1', path: './theme/theme1.css' },
{ name: '主题2', path: './theme/theme2.css' }
]"
></el-theme-changer>
```
这样就可以在Vue中使用ElementUI切换主题了。
阅读全文