vue+ElementUI改变主题色

最新推荐文章于 2024-06-20 15:55:41 发布
最新推荐文章于 2024-06-20 15:55:41 发布
阅读量2.7k 收藏 4
点赞数
分类专栏： 前端 文章标签： vue element-ui

背景介绍：项目使用vue.js+elementUI+scss，但是项目的主题色要修改为紫色。Mac电脑，且已安装过npm。
我使用的是全局安装（-g），官方文档说是建议安装在项目中

全局安装步骤

cd element-demo
npm i element-theme -g
npm i element-theme-chalk -D
et -i
修改scss中的颜色值
et
main.js修改引入

步骤说明

  1. 进入项目文件夹 cd element-demo
  2. 安装主题生成工具npm i element-theme -g
  3. 安装白垩主题（不可以省略）npm i element-theme-chalk -D
  4. 改变初始变量文件et -i，会在根目录下多出一个element-variables.scss文件
  5. 找到element-variables.scss文件，修改主题色变量（primary)和其他要改变的颜色(eg：danger)

     

  6. 编译主题et
  7. 引入自定义主题，保存后，就可以看到颜色已变为了你设置的颜色

hlqiong96119
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue-element自定义切换主题
03-10
Vue-element自定义切换主题，可以自己随意添加需要的颜色值
vue+element 主题背景颜色更换
05-06
要改变主题颜色，我们需要创建一个自定义的Less文件，并覆盖这些变量。 1. **创建自定义主题文件** - 在你的项目中创建一个新的Less文件，例如命名为`custom-theme.less`。 - 在这个文件中，你需要导入Element UI...
【Element入门】8、Element UI 自定义主题
weixin_52938153的博客
05-22 1351
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。
Vue+ElementUI实现动态更换任意主题色(动态换肤)的全过程
最新发布
qq_43432157的博客
06-20 1124
Vue+ElementUI实现动态更换任意主题色(动态换肤)的全过程
element主题色切换
Adoro的博客
05-10 2335
在网上搜了很多主题切换方案，发现没有适合自己项目的，不得已结合根据实际情况做一个子主题切换的功能。其中参考了element官方的theme-chalk-preview，感兴趣的可以自己研究一下 主要功能是基于less切换主题色，可以自定义颜色，同时结合Vuex和localStorage对主题色进行缓存，在下次进入项目时初始化 代码地址：theme-chalk-preview代码 预览地址：theme-chalk-preview预览 首先说一下我的项目环境： Vue: 2.6.10 Less: 3..
Element框架更换主题色
weixin_44266024的博客
02-07 1678
Element 默认的主题色是鲜艳、友好的蓝色，但是UI小姐姐在设计的时候会为了更贴合项目主旨设计出其他颜色的主题色，比如新能源项目一般选用绿色做为主题色，此时我们就需要更改Element框架的主题色。
Element UI 改变主题色
gaitiangai的专栏
06-06 817
原文链接：https://blog.csdn.net/weixin_44258786/article/details/123547305。node_modules\element-ui\lib\theme-chalk 下替换原有的文件。解压得到：fonts文件夹 和index.css。2、然后下载相应的主题包：style.zip。之后重启服务器就可以更换主题色了。
elementui 更换主题色
m0_38066007的博客
09-13 1086
var()
Element UI主题样式文件
04-07
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的组件，如表格、按钮、对话框、通知等，便于快速构建美观且功能强大的 Web 应用。在 Element UI 中，主题样式文件是实现自定义界面颜色和风格...
vue element 项目默认css文件 style
01-02
例如，你可能想要改变Element UI的默认主题色，可以在这里定义CSS变量，然后在组件样式中引用它们： ```css /* styles/index.css */ :root { --el-primary-color: #3399ff; /* 修改主色 */ --el-text-color: #333...
elementui 2.15.7
03-11
6. **主题定制**：通过自定义SCSS变量，开发者可以轻松改变Element UI的主题色和其他样式。 7. **动画效果**：Element UI的组件内置了优雅的过渡和动画效果，提升用户体验。 在JavaScript和ECMAScript方面，...
Vue 换肤的示例实践
11-27
在 Vue 项目中，为了实现颜色主题的切换，我们可以参考 ElementUI 的解决方案。主要步骤如下： 1. **创建主题文件**：在 `static` 目录下创建一个 `theme.css` 文件，用于存储各个主题的颜色变量。例如，定义侧边栏...
vue+element ui 主题颜色切换
zxl_start的博客
07-19 2502
vue+element ui 主题颜色切换 效果图 项目结构 element-variables.scss文件 /* 改变主题色变量 */ $--color-primary: #1890FF; /* 改变 icon 字体路径变量，必需 */ $--font-path: '~element-ui/lib/theme-chalk/fonts'; @import "~element-ui/packages/theme-chalk/src/index"; :export { theme: $--
element ui 更换主题色
小张大本事的博客
02-25 836
亲测有效的饿了么主题更换！！！简单明了 在这说一下 node、node-sass、sass-loader存在版本兼容问题需要选择合适的版本推荐一个我用的配置（node版本v14.21.1）element-variables.scss(该文件位置与下文main.js中引入的位置需要保持一致)
vue实现element-ui自定义主题色切换(简单版)
请叫我欧皇！的博客
07-20 1315
需求：通过点击图标实现了白天和黑夜的页面效果的实现，可以自定义颜色，手写，比较简单，如果需要复杂功能，根据颜色选择器实现element-ui全部的主题色切换可以看我另一篇
Vue项目 Element修改主题色
m0_51105610的博客
12-13 707
切换主题颜色
element自定义主题色
qq_35469137的博客
01-04 200
选择好自定义的主题色 右上角下载下来 放到自己的项目文件夹里。仅替换主题色 官网给出的在线主题生成链接。修改main.js的引入。
【vue】聊一聊Element UI的自定义主题颜色
拖孩
06-09 4765
ElementUI组件库相信大家一定都接触过。但是自定义主题颜色的需求有接触过的应该不多，至今我是没有遇到类似的需求。之所以讲这个需求，是因为在我的开源项目中有做到这个需求，所以在这里和大家聊一聊。
vue+elementui实现渐变色进度条
05-31
要实现渐变色进度条，你可以使用 Vue.js 框架和 Element UI 组件库。具体实现如下： 1. 在 Vue 组件中使用 el-progress 组件，设置 type 为 circle 或 line，根据需求设置不同的属性。 2. 在组件中定义 CSS 样式，使用渐变色作为进度条的背景颜色。例如： ```css .el-progress__text { color: #000; } .el-progress__text { color: #000; } .el-progress-bar__outer { background: linear-gradient(to right, #f00, #ff0, #0f0); border-radius: 100px; } .el-progress-bar__inner { border-radius: 100px; } ``` 其中，linear-gradient() 函数用于设置渐变色，to right 表示从左到右渐变，#f00、#ff0、#0f0 是三种颜色，可以根据实际需求调整。 3. 在 Vue 组件中的 el-progress 组件中添加 slot 插槽，插入自定义的内容。例如： ```html <el-progress :percentage="percentage" :type="type"> <div class="progress-text">{{ percentage }}%</div> </el-progress> ``` 其中，percentage 是进度条的百分比，type 是进度条的类型，progress-text 是自定义的样式类名。 4. 在 Vue 组件中定义 data 数据，包括进度条的百分比和类型等。 完整的代码示例如下： ```html <template> <div> <el-progress :percentage="percentage" :type="type"> <div class="progress-text">{{ percentage }}%</div> </el-progress> </div> </template> <script> export default { data() { return { percentage: 50, type: 'circle', }; }, }; </script> <style> .el-progress__text { color: #000; } .el-progress-bar__outer { background: linear-gradient(to right, #f00, #ff0, #0f0); border-radius: 100px; } .el-progress-bar__inner { border-radius: 100px; } .progress-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; font-weight: bold; } </style> ``` 通过以上步骤，你就可以实现一个具有渐变色的进度条了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值