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

最新推荐文章于 2025-07-31 11:47:31 发布
最新推荐文章于 2025-07-31 11:47:31 发布
阅读量1.6w 收藏 61
点赞数 44
CC 4.0 BY-SA版权
分类专栏： vue.js 文章标签： vue elementui elementui换肤 主题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_32340877/article/details/80176987

0. 直接上 预览链接

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

1. 项目增加主题组件

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

skin文件获取地址

2. 项目增加自定义主题

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

3. 项目引入和使用

import

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

这里写图片描述

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

这里写图片描述

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

这里写图片描述

至此整合完毕 源码地址

Vue学习大佬群493671066，美女多多。老司机快上车，来不及解释了。

作者相关Vue文章

基于Vue2.0实现后台系统权限控制

前端文档汇总

VUE2.0增删改查附编辑添加model(弹框)组件共用

打赏 衷心的表示感谢

打赏

Vue及Element UI&vue-element-admin简记
生活在别处
11-21 8095
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
两小时从零学会vue-admin-template框架
drhrht的博客
03-06 7912
一、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
基于Vue、Element的换肤(1)
2401_84411522的博客
05-02 138
但是，你发现没，这样只是将我们项目中的 Element-UI 的默认配色改成我们想要的；但是我们要做的是换肤功能，希望颜色是可以切换的。所以，我们还是用上面的方法，给这个生成的css文件里面的每一个css样式加上一个独特的命名前缀，然后换肤的时候，就将这个class添加到body上面，如此一来，也能实现很丰富的换肤功能（因为我们可以自己配很多套好看的配色）现在摆在眼前的一个需要解决的问题是：这个css文件加命名空间怎么加？我们看一下这个工具生成的，或者。
ElementUI 2.15.7：前端快速开发框架详解
最新发布
weixin_36364707的博客
07-31 987
ElementUI是一个基于Vue.js的前端UI组件库，旨在帮助开发者快速构建具有良好设计的Web界面。随着版本的迭代，ElementUI 2.15.7包含了多种组件，例如按钮、表格、表单和模态框等，这些组件可以用来构建企业级应用的界面。ElementUI不仅提供了丰富的组件，还提供了定制主题的能力，以满足不同项目的设计需求。在本章中，我们将详细介绍ElementUI的基本概念、架构以及它如何解决实际开发中的问题。
如何实现自定义主题切换？
weixin_43920514的博客
11-20 969
本文章是基于ElementUI theme-chalk-preview方法上的改进 效果展示 切换前： 切换后： 先来说一下为什么选择该方案吧，为什么有CSS变量替换等其他更优方法不用呢？ 因为IE ！！！2021了，居然还要支持IE（我不李姐???? ） 言归正传，先来了解一下原方法的思路吧???? 以下步骤代码摘抄至源码 1、使用XMLHttpRequest请求服务端的CSS样式文件（经步骤 2 处理后，将替换后的全部样式保存在 originalStyle 中） getFile (url, isB
自定义饿了么主题色，elementUI皮肤、色系、主题、主色调
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
04-09 1822
Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/theme先打开上面的地址 点击下载 复制“theme”文件夹到src/css/下面 在main.js里面加入 ... //【第三方插件】-----------------------------------...
Element UI 自定义主题
qq_40099034的博客
11-24 866
Element UI 自定义主题
Vue+ElementUI实现在线动态换肤
小马甲
10-24 1296
实现的原理：版本之后所有的样式都是基于SCSS编写的，所有的颜色都是基于几个基础颜色变量来设置的，所以就不难实现动态换肤了，只要找到那几个颜色变量修改它就可以了。首先我们需要拿到通过拿到element-ui的版本号，根据该版本号去请求相应的样式。拿到样式之后将样色，通过正则匹配和替换，将颜色变量替换成你需要的，之后动态添加style标签来覆盖原有的css样式。
element-ui@2.x 使用 ColorPicker 颜色选择器 动态换肤
weixin_46279019的博客
11-16 656
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 6909
(一) 前言 主题切换，是目前很多产品需要定制的功能，常见的比如需要给用户提供两套主题，日间和夜间模式，那么我们需要找出一种在实际项目中使用的方案 (二) 切换方案 已知道的主题切换方案有如下几种 DWZ富客户端 实现方式： 将不同主题的样式抽取出来。 生成多份不同的主题样式文件。 动态引入。 比如 // theme1.css .demo { color: red; } // the...
vue elementUI 切换主题.zip
11-13
vue elementUI 切换主题 有步骤 https://blog.csdn.net/weixin_43899650/article/details/121302368?spm=1001.2014.3001.5501
探索元素风格的无限可能 —— 主题预览（Theme Preview）项目推荐
gitblog_00090的博客
06-16 343
探索元素风格的无限可能 —— 主题预览（Theme Preview）项目推荐 在前端开发的世界里，界面设计的个性化和用户体验的优化一直是开发者们不懈追求的目标。今天，我们向您推荐一个专为Element 1.x打造的神器——主题预览（theme-preview），让您的Element UI应用瞬间拥有千变万化的视觉体验。 项目介绍 主题预览是一个强大且直观的工具，它允许开发者和设计师实时预览并定制E...
Vue+ElementUI实现多套主题换肤
小马甲
10-23 2167
本地存放多套主题，两者有不同的命名空间，如写两套主题，一套叫day theme，一套叫主题都在一个的命名空间下，我们动态的在body上。
element UI框架Fr Cover主题插画下载模板V2.0
banzhuan678的博客
12-14 1594
简介： 这是一款VUE.JS模板，基于element UI开发的一款Fr Cover 2.0插画下载模板，需要您对VUE.JS+node有一定的了解。 模板使用方法： 将源码倒入Hbulder/VS Code等工具，执行 vue ui 在打开的地址中任务一栏即可以编译和运行项目 源码中src/components/api.js中会请求3个json文件，网页的数据全部来自于他们，若打包发行在api.js中修改相对应域名即可， 若在运行模式下可以使用淘宝的rap2 ap模拟工具测试， 不如运行模式下会有跨域问
vue中实现 ‘换肤 / 切换样式主题’ 功能的三种方式详解（纯干huo）
qq_42753705的博客
12-26 2万+
方式1：定义全局的CSS变量 App.vue： <style> /* 定义全局的css变量 */ :root { /* 背景色 */ --theme_bg_color: red; /* 按钮颜色 */ --theme_button_color: yellowgreen; } </style> demo.vue（css）： <style scoped> /* 使用全局的css变量设置颜色 */ .myButton { background: va.
vue+element-ui的主题颜色切换
热门推荐
youlinaixu的博客
10-27 5万+
参考了 https://mp.csdn.net/mdeditor# 的做法，很感谢 1.安装vue-cli npm install -g vue-cli vue init webpack vue_demo cd vue_demo npm install npm run dev 2.安装element-ui及sass npm i element-ui -S npm in...
字节跳动开源 Arco Design
Yvette Lau的专栏
10-28 1万+
ArcoDesign 简介ArcoDesign 是由字节跳动 GIP UED 团队和架构前端团队联合推出的企业级设计系统。在打磨了近 3 年之后，通过字节内部大量业务沉淀和验证，我们开源了...
使用Vue2.0、Vue-router和ElementUI构建后台管理模板
在本例中，后台管理系统模板是基于Vue2.0、Vue-router和Element UI库实现的。下面详细地探讨这些技术以及如何共同协作来构建一个后台管理系统模板。 ### Vue.js Vue.js是一个构建用户界面的渐进式JavaScript框架，...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

+V拿源码：ymhyd666

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

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

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

打赏作者

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

抵扣说明：

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

余额充值