5分钟搞定 Vue3+Element-Plus 项目主题色定制

原创 已于 2024-03-28 16:44:02 修改 · 7.4k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #vue.js

于 2023-08-11 16:25:58 首次发布
本文介绍了如何在 Vue3+Element-Plus 项目中自定义主题色，包括el-button、icon图标、el-tag、Pagination和el-menu的样式调整，以及使用Pinia进行状态管理来实现主题色的切换。通过设置color属性和CSS变量，实现不同元素颜色的动态变化。

概念

首先明白什么是主题色，主题色是指一个网站或应用的主色调，是体现整体风格的一个重要标志。

比如京东，淘宝，b站，都有各自的主题色，今天就带大家手动实现一下我们自己系统的主题色！

效果

先看一下实现效果，当点击相应主题色的时候，页面相应控件的颜色都会改变。

对比图

 可以看到我们网站的主题色也已经实现了，接下来就带大家手动实现一下~

实现

注：setThemeColor 是我们设置好的主题色

el-button按钮+icon图标

el-button

这里我们采用 element-plus 所提供的按钮自定义颜色，它将自动计算按钮处于 hover 和 active 状态时的颜色。这样的一个好处就在于无论是显示，hover，active都会随着变化。代码也比较简单，只需要修改 color 属性为我们自己设置的颜色属性即可。

 <el-button :color="setThemeColor ">Default</el-button>

最低0.47元/天 解锁文章
vue3+element-plus - 最新详细实现将表格Table组件 “所见所得导出“ 为excel(xls/xlsx)电子表格文件，表格中的图片图像、图标等媒体资源完美导出显示（详细示例代码）
高级前端工程师
07-22 4602
vue3，nuxt3，element plus，表格组件，Table，el-table，导出，下载，excel，电子工作簿，xls，xlsx，将表格导出成xls，如何把表格原封不动的导出成excel，保留图片，带图片，图标，如何导出包括含有图片的Excel表格，图片和表格数据导出excel，把表格导出成excel格式，表格内的图片一起导出，vue3导出图片和数据到Excel，可导出图片，导出图像到Excel，网页上的图片怎么能导出到xls表格中，显示图片url链接，图片太多导出失败，图片会超出单元格，图片不
vue3+element-plus：解决侧边导航在页面刷新后失去高亮的问题，导航菜单使用vue-router刷新后高亮显示不一致完美解决办法（导航menu高亮变色问题，无需大改动即可解决，详细实例代码
高级前端工程师
08-17 4462
vue3 element中导航menu高亮变色问题，Element-Plus导航栏刷新高亮消失，页面刷新后侧边导航失去高亮，导航栏根据路由改变状态，Vue3中使用el-menu高亮显示问题，菜单高亮激活跳转，刷新后继续高亮刷新前的菜单选项，element-plus menu 设置default-active 页面刷新时 导航高亮 踩坑，解决Vue导航栏路由跳转，浏览器刷新后导航块高亮消失，解决Vue3 使用Element-Plus导航刷新active高亮消失，el-menu添加router属性文字颜色选中激
【超简单】ElementPlus一键修改主题色（附代码，下载编译后立即可用）
Hippogypi的博客
08-25 1482
极简版，有手就能完成替换。
ElementPlus主题色修改
小菜张的博客
09-07 2227
一般情况下我们使用elementplus的时候 肯定需要更改他的主题颜色，我们系统中的主题颜色大多数的时候适合他的主题颜色不一样的。@use引入多个文件时，每个文件都是单独的模块，相同变量名不会覆盖，通过模块名访问，而 @import变量会被覆盖。（相当于中转站，通过@forward引入scss文件并将引入scss文件中的变量、混合、函数等抛出，当其。当一个模块里面须要同时使用@use与@forward时，先使用@forwar后再使用@use。他scss文件用@use引入此模块时可使用）
vue3 + vite + element-plus 前端项目实战
最新发布
Bugs_6的博客
11-06 1742
本文介绍了基于Vue3+Vite+Element Plus的商城管理系统前端实战开发。主要包括项目初始化配置、Element Plus组件库引入与验证、Windi CSS样式工具集成、Vue Router路由配置等关键步骤。详细说明了从创建项目、依赖安装到各模块引入的具体操作流程，并提供了404页面的处理方案。通过按钮组件等示例代码演示了各模块的使用方法，为后续商城管理系统开发奠定基础。文章结构清晰，包含命令行操作和代码片段，便于开发者快速上手Vue3全新技术栈的项目搭建。
Vue3+Element-Plus 项目主题色定制
IDycy的博客
06-13 2259
Vue 3 + Element Plus 项目中定制主题颜色
配置element-plus主题色
i_am_a_div的博客
08-11 5381
修改element-plus主题色
vue3 项目引入element plus 组件库 以及修改主题颜色
w1314_1314的博客
04-25 2539
vue3 项目引入element plus 组件库 以及修改主题颜色
element-plus 修改主题色（按需导入）
Serenity_Qin的博客
11-02 1350
2. 参照 element-plus 官网新建样式文件：src / styles / element / index.scss。1. 安装 sass。
从零开始搭建vue3 + ts + pinia + vite +element-plus项目
zhoushuizhang的博客
07-22 1319
从零开始搭建vue3 + ts + pinia + vite +element-plus项目
【完美实现】VITE + VUE3 + SVG图片解析+element-plus开发环境初始化（基于macos）
tacity的博客
03-08 1800
实现基于macos电脑的，vue基础配置成 ts语言环境，加载router、element-plus、svg解析器的一键解决方案
修改element-plus的主题色css变量
i_am_a_div的博客
06-19 1551
修改element-plus的主题色css变量
Vue3 - Element Plus 全局修改更换主题色配置详细教程，element-plus自定义主题色全局替换主色调强力解决方案，支持动态修改主题颜色/动态皮肤，将默认蓝色主题色更换为其他颜色！
热门推荐
🏆 前端领域优质创作者
08-14 1万+
vue3，nuxt3，element-plus，组件库，主题色，修改主题颜色，更换主题色，如何修改组件默认主题蓝色，项目主题色定制，修改失败，主题色覆盖不了，:root直接修改，hover颜色没改，自定义主题色，vue3全局设置elementPlus主题色最新详细修改教程，怎么修改全局的颜色，scss变量，覆盖原来的主题色改为自己的颜色，统一替换，有没有好办法，颜色不变，失败，无效，动态主题切换，主题颜色怎么在项目里直接改，plus主题色更换，覆盖默认主题色，最强最好用，设置主题色，换肤，皮肤，动态更换
Vue3项目中Element Plus主题色定制（通过scss变量替换方案）
听海边涛声
05-20 1万+
Vue3项目中Element Plus主题色定制（通过scss变量替换方案）
配置Element-Plus主题颜色
Wgq0731的博客
09-18 1150
下载scss在打开vue项目的编辑器中打开终端，或者在cmd窗口进入到项目目录下用你的包管理器安装scss,例如使用npm包管理器： ps:sass是管理scss文件的准备定制样式文件var.scss(定义你想要的颜色变量，都以字符$开头)，例如： index.scss用来覆盖elementui的颜色样式，例如: 指令用于将一个或多个其他文件的内容合并到当前文件中，但不会在当前文件中直接包含被转发文件的样式。这使得 成为模块化 Sass 代码、创建可重用库以及组织大型项目时的一个有用工具。对
Vue3 + Element Plus 项目实现自定义主题切换
m0_65029152的博客
12-19 9224
vue3 + Element Plus 实现自定义主题切换
vue3 ts vite elementplus更改主题颜色
tdjqqq的博客
11-17 979
最近突然间主题色不见了，恢复到了默认情况，可能是配置的vite自定义引入及其它相关的配置，导致的问题。结果用动态改变主题色来实现改变主题了，先看下代码。这样，主题色就更改过来了，但是有个问题，页面会从elementplus的默认蓝色变成我设置的色，不在乎的过。若在乎，请自己找其它方案。开发工具：vue3 + ts + vite + elementplus。
Vue3+Ts+Vite项目(第十三篇)——配置Element-Plus主题色
做笔记/记录遇到的前端bug
08-12 4084
找了很多博客，总结出来的最有效的vue3+ts+vite项目配置element-plus组件主题色
element-plus修改主题颜色
weixin_62918410的博客
03-07 2358
element-plus修改主题颜色。
vue2 +element-ui 上传文件
03-08
### 实现 Vue2 中基于 Element-UI 的文件上传 在 Vue2 项目里集成 Element-UI 来完成文件上传功能，主要依赖于 `el-upload` 组件。此组件提供了丰富的配置选项以及事件处理机制以便开发者灵活控制文件的选择、预览和上传过程。 #### 安装并引入 Element-UI 为了能够在项目中使用 Element-UI 提供的各种 UI 组件，需先安装该库，并将其全局注册至应用实例内[^2]： ```javascript // main.js import Vue from &#39;vue&#39;; import App from &#39;./App.vue&#39;; // 引入整个 Element-UI 库及其样式资源 import ElementUI from &#39;element-ui&#39;; import &#39;element-ui/lib/theme-chalk/index.css&#39;; Vue.config.productionTip = false; // 使用插件形式挂载 Element-UI 到 Vue 上下文中 Vue.use(ElementUI); new Vue({ render: h => h(App), }).$mount(&#39;#app&#39;); ``` #### 创建文件上传页面 接下来定义一个简单的 HTML 结构用于展示文件上传按钮和其他必要的交互元素。在此基础上利用 `el-upload` 组件的相关属性定制化需求特性，比如指定 action URL（服务器接收地址）、设置文件列表显示模式等[^1]。 ```html <template> <div class="upload-demo"> <!-- el-upload 组件 --> <el-upload :action="uploadUrl" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :before-upload="beforeAvatarUpload" :file-list="fileList" multiple> <i class="el-icon-plus"></i> </el-upload> <!-- 图片预览对话框 --> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </div> </template> <script> export default { data() { return { uploadUrl: &#39;/api/upload&#39;, // 假设这是你要发送文件的目标URL fileList: [], // 已经上传成功的文件列表 dialogImageUrl: &#39;&#39;, // 当前正在查看的大图链接 dialogVisible: false, // 控制大图弹窗可见状态 }; }, methods: { handleRemove(file, fileList) { /* 移除图片时触发 */ }, handlePictureCardPreview(file) {/* 预览图片时调用*/}, beforeAvatarUpload(file) {/* 文件上传之前做一些校验*/} } }; </script> ``` 上述代码片段展示了如何创建一个多选图片卡片样式的文件选择器，并允许用户点击缩略图放大查看所选图像。同时实现了基本的增删操作回调函数框架结构。 #### 处理文件上传逻辑 实际开发过程中还需要关注具体的业务场景，例如验证待传文件大小/类型合法性、监听进度变化通知前端界面更新、捕获异常情况给出友好提示等等。这些都可以借助 `el-upload` 自带钩子方法轻松搞定[^3]。 对于某些特殊情形下的自定义行为，则可能涉及到手动发起 HTTP 请求向服务端传递二进制流数据。此时可以考虑借用 axios 或者原生 Fetch API 构建 FormData 对象封装所需参数再执行 POST 方法提交给后台接口解析处理。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JacksonChen_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值