elementui plus更换主题颜色——so easy! + i18n 中文

可乐KL

于 2021-10-12 09:48:24 发布

阅读量2.7k

点赞数 1

分类专栏： vue 文章标签： elementui vue.js

本文链接：https://blog.youkuaiyun.com/m0_49494051/article/details/120717374

版权

vue 专栏收录该内容

37 篇文章

订阅专栏

这篇博客介绍了如何在APP.vue文件中使用SCSS定义全局变量，通过改变这些变量实现Element Plus组件库的颜色风格一键切换，无需额外安装任何工具。同时，文章提到了i18n国际化配置，展示了如何引入并使用Element Plus的中文语言包。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想要一次性更换颜色吗？无需安装任何东西

APP.vue 文件中

<style lang="scss">
:root {
    --el-color-primary: #15ae6d;
}
.el-button--primary {
    --el-button-font-color: #ffffff;
    --el-button-background-color: #15ae6d;
    --el-button-border-color: #15ae6d;
    --el-button-hover-color: #15ae6d;
    --el-button-active-font-color: #e6e6e6;
    --el-button-active-background-color: #15ae6d;
    --el-button-active-border-color: #15ae6d;
}
</style>

i18n 国际化

import zhCn from 'element-plus/es/locale/lang/zh-cn'

const app = createApp(App)
app.use(ElementPlus, {
  locale: zhCn,
})