element UI 主题换肤
在element UI官网有更换主题的方式大家可以参考。但是在实践过程中如果想实现动态切换主题,就比较麻烦了。个人总结了两种方式(如果有其他方式,欢迎留言)。
一、下载静态文件到本地,切换本地静态资源来实现主题换肤。
1、下载到本地后,存放到静态资源目录,通过更换引入路径来切换主题。
data() {
return {
// 默认浅色主题
theme: 'shallow',
}
},
mounted() {
let cssFile = document.createElement("link");
cssFile.setAttribute("rel", "stylesheet");
cssFile.setAttribute("type", "text/css");
cssFile.setAttribute("href", "/styles/green/theme/index.css");
cssFile.setAttribute("id", "color");
document.head.appendChild(cssFile);
},
methods: {
//切换主题色
go() {
this.theme = 'shallow'
console.log(document.querySelector('#color'))
document.querySelector('#color').setAttribute("href","/styles/green/theme/index.css")
},
go2() {
this.theme = 'deep'
document.querySelector('#color').setAttribute("href","/styles/red/theme/index.css")
}
}
二、第二种是参考vue-admin的暴力换肤
- 先把默认主题文件中涉及到颜色的 CSS 值替换成关键词
- 根据用户选择的主题色生成一系列对应的颜色值
- 把关键词再换回刚刚生成的相应的颜色值
- 直接在页面上加 style 标签,把生成的样式填进去
具体组件代码为下
<template>
<div>
<el-color-picker v-model="theme" class="theme-picker" :predefine="predefineColors" popper-class="theme-picker-dropdown">
</el-color-picker>
</div>
</template>
<script>
const version = require("element-ui/package.json").version; // 版本号
const ORIGINAL_THEME = "#409EFF";
export default {
name: "colorPicker",
data() {
return {
chalk: "",
theme:ORIGINAL_THEME,
predefineColors: [
"#409EFF",
"#ff4500",
"#ff8c00",
"#ffd700",
"#90ee90",
"#00ced1",
"#1e90ff",
"#c71585",
"rgba(255, 69, 0, 0.68)",
"rgb(255, 120, 0)",
"hsv(51, 100, 98)",
"hsva(120, 40, 94, 0.5)",
"hsl(181, 100%, 37%)",
"hsla(209, 100%, 56%, 0.73)",
"#c7158577"
]
};
},
mounted(){
if(this.CheckIsColor(localStorage.getItem('colorPicker'))){
this.theme=localStorage.getItem('colorPicker')
}
},
watch: {
theme(val, oldVal) {
if (typeof val !== "string") return;
localStorage.setItem('colorPicker',val)
const themeCluster = this.getThemeCluster(val.replace("#", ""));
const originalCluster = this.getThemeCluster(oldVal.replace("#", ""));
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
);
});
}
},
methods: {
CheckIsColor(bgVal) {
var type = "^#[0-9a-fA-F]{6}$";
var re = new RegExp(type);
if (bgVal.match(re) == null) {
type = "^[rR][gG][Bb][\(]([\\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?)[\\s]*,){2}[\\s]*(2[0-4]\\d|25[0-5]|[01]?\\d\\d?)[\\s]*[\)]{1}$";
re = new RegExp(type);
if (bgVal.match(re) == null) {
return false;
} else {
return true;
}
} else {
return true;
}
},
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 lang="scss" scoped>
.theme-picker .el-color-picker__trigger {
vertical-align: middle;
}
.theme-picker-dropdown .el-color-dropdown__link-btn {
display: none;
}
.pract{
color: $basicWolor;
}
</style>
参考地址:https://github.com/ElemeFE/element/issues/3054
利用scss进行换肤
1、构建scss
/**绿色主题**/
$--green-borderColor: #1AF6FF;
/**蓝色主题**/
$--blue-borderColor: #0DD4F1;
$themes: (
/**绿色主题**/
green:(
// 边框色
borderColor:$--green-borderColor
/**蓝色主题**/
blue:(
// 边框色
borderColor:$--blue-borderColor
);
//遍历主题map
@mixin themeify {
@each $theme-name,
$theme-map in $themes {
//!global 把局部变量变为全局变量
$theme-map: $theme-map !global;
//判断html的data-theme的属性值 #{}是sass的插值表达式
//& sass嵌套里的父容器标识 @content是混合器插槽,像vue的slot
[data-theme="#{$theme-name}"] & {
@content;
}
}
}
//声明一个根据Key获取颜色的function
@function themed($key) {
@return map-get($theme-map, $key);
}
//获取边框色
@mixin borderColor($color) {
@include themeify {
border-color: themed($color);
transition: all 0.5s;
}
}
2、使用
切换data-theme的属性,来展示不同的主题。在这里指明使用的主题,后面可以自由切换
mounted() {
window.document.documentElement.setAttribute('data-theme','green');
}