vue2.0-基于elementui换肤[自定义主题]

最新推荐文章于 2025-08-15 09:01:53 发布
最新推荐文章于 2025-08-15 09:01:53 发布
阅读量84 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/qianjin888/p/8985093.html
本文介绍如何在Vue2.0项目中使用ElementUI实现主题更换功能。主要步骤包括：添加主题组件到src/components/skin文件夹；自定义主题颜色；选择希望随主题变化的ElementUI元素；并在应用启动时读取cookie设置当前主题。

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

https://juejin.im/post/5aea98a16fb9a07ab3794658

0. 直接上 预览链接

vue2.0-基于elementui换肤[自定义主题]

1. 项目增加主题组件

在项目的src/components下添加skin文件夹

skin文件获取地址

2. 项目增加自定义主题

自定义添加主题下载地址 https://elementui.github.io/theme-chalk-preview/#/zh-CN

3. 项目引入和使用

 

import

 

选择你想要随主题改变的element元素在src/global/themeArray里面，不希望随主题改变的可以注释掉

 

这里写图片描述

 

选择皮肤之后把记录存在cookie里面。

 

这里写图片描述

 

再次打开浏览器访问项目钩子初始化的时候从cookie里面得到之前选择的皮肤。

 

这里写图片描述

 

至此整合完毕 源码地址

 

转载于:https://www.cnblogs.com/qianjin888/p/8985093.html

Vue及Element UI&vue-element-admin简记
生活在别处
11-21 8020
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
两小时从零学会vue-admin-template框架
drhrht的博客
03-06 7680
一、vue-admin-template 1.项目简介 官网：https://github.com/PanJiaChen vue-element-admin是含有丰富的组件，vue-admin-template是一个基础的单页面应用的框架，适合在vue-admin-template上二次开发，开发需要的组件就可以直接的从vue-element-admin里面拷贝上去。适合于后台管理的中小型项目，内部的架构非常的完善，简单易上手。 1.2下载项目 vue-element-admin 官网 vue-admi
element如何自定义主题？最简单的方法还不get起来！！！
qq_63322025的博客
06-01 190
element如何自定义主题
《Vue》聊一聊实际项目中前端的几种皮肤实现和优缺点
Oliver尹的博客
03-12 1912
在现代大前端领域中，换肤功能已经逐渐成为几乎所有应用的标配，尤其是暗夜模式被推广之后，皮肤功能就正式走到了大众的视野，同样，在web领域尤其是后台管理系统中皮肤功能也由此几乎成为了标配，恰好最近在做的东西同样要包含这样一套机制~
vue2.0 web端使用腾讯IM，不太熟练，可自己进行重构
weixin_47517731的博客
06-09 4609
1：安装腾讯IM 腾讯文档走起即时通信 IM 集成 SDK（Web & 小程序 & uni-app）-自实现 UI 集成方案-文档中心-腾讯云-腾讯云(1)：基本配置走起 2：登录到腾讯IM（可在用户登录账号后直接进行如下操作） 3：监听IM的事件...............
element ui 自定义主题失败（primordials is not defined）
主要领域：前端开发
03-18 8709
卸载： 1、卸载cnpm npm uninstall cnpm -g 2、卸载vue-cli npm uninstall @vue/cli -g 3、卸载nodejs和删除文件 C:\Program Files (x86)\nodejs C:\Program Files\nodejs C:\Users\Administrator\AppData\Roaming\npm C:\Users\Ad...
自定义element-ui主题，修改样式
ddyy265201503的博客
03-28 588
项目需求 之前项目中引用的select选框有bug,所以需要改动，考虑到还有许多需求，果断将饿了么组件全移过来 安装element-ui2.0.1版本 安装完之后，我就将element-ui的组件应用上，然后编译的时候报错了。就是el-ipt找不到一类的错误，查了查资料，说是版本不一致，element-ui2.0的版本需要升级vue的版本，如下解决办法： 更改版本 把vue 和 vue-...
vue-element-admin的自定义主题切换功能实现
weixin_41355989的博客
09-22 3203
原本vue-element-admin的切换样式，只是换了一些按钮和其他一些基本的样式，但是项目需要不同颜色主题的版本，比如白天模式和夜间模式。 参考：https://github.com/lss5270/vue-admin-spa（vue2.0+） 实现效果： 主要实现步骤： 1.自定义主题文件blue/green/red…分别代表不同颜色的主题css文件夹，文件夹下的文件名和数量需要保持一致。 2.把src/global的文件夹实现主题css的文件的切换 注意:需要下载依赖：npm install
Vue + ElementUI 实现动态更换任意主题色（动态换肤）
aSmallProgrammer的博客
11-25 9299
Vue + ElementUI 实现动态更换任意主题色（动态换肤）
VUE+ElementUI项目换肤功能
前端开发
03-15 3438
一、固定多套主题换肤 二、ElementUI动态换肤
Vue+ElementUI实现在线动态换肤
小马甲
10-24 1281
实现的原理：版本之后所有的样式都是基于SCSS编写的，所有的颜色都是基于几个基础颜色变量来设置的，所以就不难实现动态换肤了，只要找到那几个颜色变量修改它就可以了。首先我们需要拿到通过拿到element-ui的版本号，根据该版本号去请求相应的样式。拿到样式之后将样色，通过正则匹配和替换，将颜色变量替换成你需要的，之后动态添加style标签来覆盖原有的css样式。
element-ui@2.x 使用 ColorPicker 颜色选择器 动态换肤
weixin_46279019的博客
11-16 650
1.在根目录下的components文件夹下创建组件ThemePicker.vue <template> <el-tooltip effect="dark" content="theme" placement="bottom"> <el-color-picker v-model="theme" class="theme-picker" size="small" popper-class="theme-picker-dropdown
Vue 在sass中的主题切换方案
JUSTIN的博客
05-27 6892
(一) 前言 主题切换，是目前很多产品需要定制的功能，常见的比如需要给用户提供两套主题，日间和夜间模式，那么我们需要找出一种在实际项目中使用的方案 (二) 切换方案 已知道的主题切换方案有如下几种 DWZ富客户端 实现方式： 将不同主题的样式抽取出来。 生成多份不同的主题样式文件。 动态引入。 比如 // theme1.css .demo { color: red; } // the...
Element Theme 项目常见问题解决方案
gitblog_09250的博客
09-13 552
Element Theme 项目常见问题解决方案 项目基础介绍 Element Theme 是一个用于生成 Element UI 主题的命令行工具。Element UI 是一套基于 Vue 2.0 的桌面端组件库，而 Element Theme 则允许开发者自定义和生成 Element UI 的主题样式。该项目的主要编程语言是 JavaScript。 新手使用注意事项及解决方案 1. 安装问题 问...
Go语言实战案例:静态资源服务（CSS、JS、图片）
最新发布
tenkofx的博客
08-15 504
• Gin 提供Static()方法一行就能完成静态文件托管。• 静态文件路径映射和 URL 前缀可以灵活配置。• 结合 HTML 模板，可以很方便地构建完整的前端页面服务。
electron进程间通信- 从渲染进程到主进程
唐璜Taro的博客
08-13 1008
本文介绍了Electron中的IPC进程间通信机制，重点解析了从渲染进程到主进程的单向通信实现方式。这种设计既保证了功能实现，又遵循了Electron的安全通信原则，是开发桌面应用的常用模式。
MoonBit Perals Vol.05: 函数式里的依赖注入：Reader Monad
m0_74743788的博客
08-13 1228
普通的函数就像一个流水线，你丢进去一袋面粉，然后直接跑到生产线末端，等着方便面出来。但这条流水线需要自动处理中间的所有复杂情况：没放面粉/“没有下单，期待发货”（null）面团含水量不够把压面机干卡了（抛出异常）配料机需要读取今天的生产配方，比如是红烧牛肉味还是香菇炖鸡味（读取外部配置）流水线末端的打包机需要记录今天打包了多少包（更新计数器）Monad 就是专门管理这条复杂流水线的“总控制系统”。它把你的数据和处理流程的上下文一起打包，确保整个流程能顺畅、安全地进行下去。
使用Vue2.0、Vue-router和ElementUI构建后台管理模板
在本例中，后台管理系统模板是基于Vue2.0、Vue-router和Element UI库实现的。下面详细地探讨这些技术以及如何共同协作来构建一个后台管理系统模板。 ### Vue.js Vue.js是一个构建用户界面的渐进式JavaScript框架，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值