首页 前端知识 5分钟搞定 Vue3 Element-Plus 项目主题色定制

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

2024-04-18 00:04:09 前端知识 前端哥 22 837 我要收藏

概念

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

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

效果

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

对比图

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

实现

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

el-button按钮 icon图标

el-button

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

 <el-button :color&
转载请注明出处或者链接地址:https://www.qianduange.cn//article/5141.html
标签
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!