Vue + Element UI 实现权限管理系统(更换皮肤主题)
自定义主题
命令行主题工具
1.安装主题工具
首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动。
yarn add element-theme --dev
2.安装chalk主题
安装白垩主题,可以从 npm 安装或者从 GitHub 拉取最新代码,这里从 npm 安装。
yarn add element-theme-chalk -D
3.初始化变量文件
主题生成工具安装成功后,如果全局安装可以在命令行里通过 et
调用工具,如果安装在当前目录下,需要通过 node_modules/.bin/et
访问到命令。执行 -i
初始化变量文件。默认输出到 element-variables.scss
,当然你可以传参数指定文件输出目录。
node_modules/.bin/et -i
执行命令
命令执行成功之后,会在根目录生成 scss文件 element-variables.scss 。
4、修改主题色
在 element-variables.scss 文件里修改 $–color-primary:#4b5f6e,即你想要的主题颜色
5、编译主题
执行主题编译命令生成主题,根目录会生成一个theme的文件夹 。
node_modules/.bin/et
6、引入自定义主题
把生成的主题按颜色改名放置 src/theme 目录下。
在 main.js 中 import ‘所在路径/index.css’。
7、效果展示
重新加载后,我们看到按钮颜色已经不是默认的蓝色了。
动态换肤器方式
1. 在下图位置添加封装的换肤组件。
index.vue

<template>
<el-color-picker
class="theme-picker"
popper-class="theme-picker-dropdown"
v-model="theme"></el-color-picker>
</template> <script> const version = require('element-ui/package.json').version // element-ui version from node_modules
const ORIGINAL_THEME = '#409EFF' // default color export default {
data() {
return {
chalk: '', // content of theme-chalk css
theme: ORIGINAL_THEME
}
},
watch: {
theme(val, oldVal) {
if (typeof val !== 'string') return
const themeCluster = this.getThemeCluster(val.replace('#', ''))
const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
console.log(themeCluster, originalCluster)
const getHandler = (variable, id) => {
return () => {
const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster) let styleTag = document.getElementById(id)
if (!styleTag) {
styleTag = document.createElement('style')
styleTag.setAttribute('id', id)
document.head.appendChild(styleTag)
}
styleTag.innerText = newStyle
}
} const chalkHandler = getHandler('chalk', 'chalk-style') if (!this.chalk) {
const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
this.getCSSString(url, chalkHandler, 'chalk')
} else {
chalkHandler()
} const styles = [].slice.call(document.querySelectorAll('style'))
.filter(style => {
const text = style.innerText
return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
})
styles.forEach(style => {
const { innerText } = style
if (typeof innerText !== 'string') return
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
})
this.$message({
message: '换肤成功',
type: 'success'
})
}
}, methods: {
updateStyle(style, oldCluster, newCluster) {
let newStyle = style
oldCluster.forEach((color, index) => {
newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
})
return newStyle
}, getCSSString(url, callback, variable) {
const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
callback()
}
}
xhr.open('GET', url)
xhr.send()
}, getThemeCluster(theme) {
const tintColor = (color, tint) => {
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16) if (tint === 0) { // when primary color is in its rgb space
return [red, green, blue].join(',')
} else {
red += Math.round(tint * (255 - red))
green += Math.round(tint * (255 - green))
blue += Math.round(tint * (255 - blue)) red = red.toString(16)
green = green.toString(16)
blue = blue.toString(16) return `#${red}${green}${blue}`
}
} const shadeColor = (color, shade) => {
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16) red = Math.round((1 - shade) * red)
green = Math.round((1 - shade) * green)
blue = Math.round((1 - shade) * blue) red = red.toString(16)
green = green.toString(16)
blue = blue.toString(16) return `#${red}${green}${blue}`
} const clusters = [theme]
for (let i = 0; i <= 9; i++) {
clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
}
clusters.push(shadeColor(theme, 0.1))
return clusters
}
}
}
</script> <style>
.theme-picker .el-color-picker__trigger {
vertical-align: middle;
} .theme-picker-dropdown .el-color-dropdown__link-btn {
display: none;
}
</style>

2.直接在组件中引用
在 Home.vue 中引入
在语言切换左边添加换肤组件
3.换肤测试
点击组件,选择一个颜色确定
我们看到相关主题颜色即刻生效
退回登录界面查看
Vue + Element UI 实现权限管理系统(更换皮肤主题)的更多相关文章
- Vue + Element UI 实现权限管理系统
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html
- Vue + Element UI 实现权限管理系统 前端篇(十三):页面权限控制
权限控制方案 既然是后台权限管理系统,当然少不了权限控制啦,至于权限控制,前端方面当然就是对页面资源的访问和操作控制啦. 前端资源权限主要又分为两个部分,即导航菜单的查看权限和页面增删改操作按钮的操作 ...
- Vue + Element UI 实现权限管理系统 前端篇(十一):第三方图标库
使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font ...
- Vue + Element UI 实现权限管理系统(第三方图标库)
使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font ...
- Vue + Element UI 实现权限管理系统 前端篇(六):更换皮肤主题
自定义主题 命令行主题工具 1.安装主题工具 首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动. yarn add ele ...
- Vue + Element UI 实现权限管理系统(搭建开发环境)
技术基础 开发之前,请先熟悉下面的4个文档 vue.js2.0中文, 优秀的JS框架 vue-router, vue.js 配套路由 vuex,vue.js 应用状态管理库 Element,饿了么提供 ...
- Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境
技术基础 开发之前,请先熟悉下面的4个文档 vue.js2.0中文, 优秀的JS框架 vue-router, vue.js 配套路由 vuex,vue.js 应用状态管理库 Element,饿了么提供 ...
- Vue + Element UI 实现权限管理系统 前端篇(十二):用户管理模块
用户管理模块 添加接口 在 http/moduls/user.js 中添加用户管理相关接口. import axios from '../axios' /* * 用户管理模块 */ // 保存 exp ...
- Vue + Element UI 实现权限管理系统 (管理应用状态)
使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题.收缩 ...
随机推荐
- R语言多层绘图
#########################################################第一种实现方法close.screen(all.screens = T)split.s ...
- JDBC的通用查询的方法
PreparedStatement 1.Why 1):使用Statement需要进行拼写SQL语句,很辛苦,而且容易出错. 2):使用Statement可以发生SQL注入. SQl注入: SQL注入是 ...
- BZOJ 3585 mex
题目已经没有了 思路: 莫队+分块 首先有一个结论:所有的答案都在0到n之间,用反正法就能证明,所以所有大于n的数都可以看成n 离线,对询问区间进行莫队,再对答案的范围0到n进行分块 复杂度(n+2* ...
- Linux 各种软件的安装-mysql篇
作为一个长期混迹在windows圈的小白,当拿到一个新的linux服务器时,有点手足无措的赶脚.但是万事开头难嘛,Just Do It! 下面记录一下自己安装各种软件时遇到的坑.这一篇先讲mysql ...
- 练习:将值是null的数据删除掉(剔除):com.fasterxml.jackson.annotation.JsonInclude;包
练习:将值是null的数据删除掉(剔除):com.fasterxml.jackson.annotation.JsonInclude;包 例如,有数据是null,不想展示 { "statusC ...
- python2.x编码问题实例
1,编码问题,主要是区分面向人类的字符串,面向计算机的字节序列 在python3中,字符串是str(默认即unicode),字节序列是bytes 在python2中,字符串是unicode,字节序列是 ...
- LeetCode--844--比较含退格的字符串(java)
给定 S 和 T 两个字符串,当它们分别被输入到空白的文本编辑器后,判断二者是否相等,并返回结果. # 代表退格字符. 示例 1: 输入:S = "ab#c", T = " ...
- 部署的error和排查,注意服务器内存占用!
mysqladmin: connect to server at 'localhost' failed error: 'Can't connect to local MySQL server thro ...
- 微信小程序如何导入字体图标
前提:我们已经拥有了从阿里图标库下载下来的一系列的字体图标文件1:找个其中的ttf格式的文件,然后打开https://transfonter.org/网站2:点击Add fonts按钮,加载ttf格式 ...
- vue.js中 v-show在刷新页面时,会闪一下,如何解决?
因为浏览器是html从上到下执行,先执行Dom元素,然后执行javaScript元素,v-show实在javaScript中控制,当走到javaScript时,Dom元素已经开始走动,所以如果网慢的话 ...