一、拉vue-element-admin的代码跑起来

安装依赖时会遇到一些问题，tui-editor装不上，需要按照以下步骤删除它

1、vue-element-admin\package.json 删除‘tui-editor’：‘1.3.3’依赖项。
2、vue-element-admin\src\components 删除MarkdownEditor文件夹。
3、vue-element-admin\src\view\components-demo 删除markdown.vue文件。
4、vue-element-admin\src\router\modules components.js 删除{path:‘markdown,’}这一列。
5、npm install
6、npm run dev

二、修改主题色和自定义颜色

参照ThemePicker组件里的方法，简单修改后编写了一个混入文件 themeMixin.js ，在登录页以及layout/AppMain.vue 引入，并在created生命周期调用方法 this.handleUserTheme()

themeMixin.js下载地址↓

链接：https://pan.baidu.com/s/104HYcJeqnni6sTb7U1afKA?pwd=28rf
提取码：28rf

登录页面的使用方式↓

import { themeMixin } from '@/mixins/themeMixin'mixins: [themeMixin],  // 和created同级

将从接口获取到该用户的主题色本地缓存下，然后调用混入里的方法执行换肤

          // 主题色缓存this.$ls.set('theme-color', res.data.interfaceTheme)// 切换主题色和其他自定义颜色this.handleUserTheme()document.getElementsByTagName('body')[0].style.setProperty('--subjectColor', res.data.interfaceTheme)

后面的

document.getElementsByTagName('body')[0].style.setProperty('--subjectColor', res.data.interfaceTheme)

是为了修改scss文件里的自定义颜色变量，因为项目除了eleme的组件还会有很多自定义组件，会了保持样式颜色的统一，很多自定义组件都会用自定义scss变量和主题色保持一致

variables.scss定义的scss变量, 可通过js修改

自定义scss变量使用示例：

每次主题色变的时候，自定义颜色也跟着变，这样就保证了主题色和自定义组件的风格统一了！

@import "~@/styles/variables.scss";background-color: var(--subjectColor);

-----------------------------------------------------------------------------------------------------------

AppMain.vue的使用方式↓

引入方式同上

因为登录进去后每次F5刷新会先进AppMain.vue的created , 所以在这里执行一次换肤很适合

主题色换肤的原理就是：从线上拿到当前版本的elemeUi组件的css文件，替换其中涉及到主题色的style，该方式刷新会失效，所以需要每次刷新修改一次

不足：

1. 登录页每次刷新从接口取颜色的时候会短暂闪过初始主题色，接口取值需要时间

2. 每次换肤都要调用eleme官方CDN ，哪天崩了我也要崩了

3. 应该有更完善的本地换肤方式

vue-element-admin 换肤功能，登录后不同权限不同皮肤，刷新不会失效相关推荐

VUE+ElementUI项目换肤功能
VUE+ElementUI项目换肤功能一.固定多套主题换肤设置页面 (views/layout.vue) themes.js (@/utils/themes) main.js css相关结构及内容 ...
vue的一键换肤功能
由于项目是已经写好了的,需要突然加一个一键换肤的功能,切换黑白两个皮肤,但是最好不要大量改动代码- 1.sass+vue 这种方法需要安装一个插件,webpack-theme-color-replac ...
android应用换肤功能,如何给Android应用更换皮肤
Android应用更换皮肤功能的实现思路我们可以将皮肤包做成一个apk文件,在应用apk中读取皮肤包中的数据. 应用apk读取皮肤包apk的数据的条件 1. 有相同签名 2. AndroidMani ...
Element UI主题换肤功能(基于vue-element-admin框架)
环境信息: 日期:2022-08-05 node版本:v14.15.4 "sass": "1.26.8", "sass-loader": & ...
vue移动助手实践（一）——基于vue的换肤功能
最近在做的一个几月vue的移动端小demo,其中有一块是实现各个页面的统一换肤功能的.想着写一篇文章,来写一写实现过程中遇到的一些问题. 项目在线demo 项目在线演示demo(切换到移动端调试模式哦 ...
vue 实现换肤功能
公司项目要实现vue项目换肤功能,要求一套深色,一套浅色,考虑到最节省时间的就是写两套css,一套light.css,一套dark.css,然后切换css 一.实现思路:切换选中的皮肤状态(light ...
vue element admin登录方式切换（密码登录或短信登录）
显示结果: 具体代码可以根据vue element admin源码进行更改,下面是页面代码 <el-form ref="loginForm" :model="log ...
使用 css/less 动态更换主题色（换肤功能）
前言说起换肤功能,前端应该是非常熟悉了? 一般来说换肤的需求分为几种: 1. 纯前端,直接在页面前端通过点击自由切换限定的几种主题色,切换之后主题色变量存到本地浏览器 2. 在后台配置好色值,传到前 ...
vue+element 实现试卷答题功能，单选题 ,多选题，判断题，简答题（2.0版本，2021.3.25更新）
vue+element 实现试卷答题功能,单选题 ,多选题,判断题,简答题(2.0版本,2021.3.25更新) 文章目录 vue+element 实现试卷答题功能,单选题 ,多选题,判断题,简答 ...

vue-element-admin 换肤功能，登录后不同权限不同皮肤，刷新不会失效

一、拉vue-element-admin的代码跑起来

二、修改主题色和自定义颜色

vue-element-admin 换肤功能，登录后不同权限不同皮肤，刷新不会失效相关推荐

最新文章

热门文章