<!-- 切换主题色 -->
|
<template>
|
<div>
|
<el-switch
|
v-show="false"
|
v-model="switchColor"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
@change="setSwitchColor"
|
>
|
</el-switch>
|
<el-color-picker
|
v-show="false"
|
@change="colorChange"
|
v-model="colors.primary"
|
></el-color-picker>
|
</div>
|
</template>
|
<script>
|
import generateColors from '../../utils/color';
|
import objectAssign from 'object-assign';
|
export default {
|
name: 'App',
|
data() {
|
return {
|
switchColor: true,
|
originalStylesheetCount: -1, //记录当前已引入style数量
|
originalStyle: '', //获取拿到的.css的字符串
|
colors: {
|
//颜色选择器默认颜色值,这个值要和element-variables一样
|
primary: '#303030',
|
},
|
// primaryColor: "", //提交成功后设置默认颜色
|
cssUrl: [
|
'//unpkg.com/element-ui/lib/theme-chalk/index.css',
|
'./static/css/index.css',
|
],
|
};
|
},
|
methods: {
|
setSwitchColor() {
|
if (this.switchColor == false) {
|
let val = '#409EFF';
|
this.colorChange(val);
|
this.colors.primary = val;
|
} else if (this.switchColor == true) {
|
let val = '#303030';
|
this.colorChange(val);
|
this.colors.primary = val;
|
}
|
},
|
colorChange(e) {
|
if (!e) return;
|
|
localStorage.setItem('color', e);
|
this.primaryColor = this.colors.primary;
|
this.colors = objectAssign(
|
{},
|
this.colors,
|
generateColors(this.colors.primary)
|
);
|
this.writeNewStyle();
|
},
|
writeNewStyle() {
|
let cssText = this.originalStyle;
|
Object.keys(this.colors).forEach((key) => {
|
cssText = cssText.replace(
|
new RegExp('(:|\\s+)' + key, 'g'),
|
'$1' + this.colors[key]
|
);
|
});
|
if (this.originalStylesheetCount === document.styleSheets.length) {
|
// 如果之前没有插入就插入
|
const style = document.createElement('style');
|
style.innerText =
|
'.primaryColor{background-color:' +
|
this.colors.primary +
|
'}' +
|
cssText;
|
document.head.appendChild(style);
|
} else {
|
// 如果之前没有插入就修改
|
document.head.lastChild.innerText =
|
'.primaryColor{background-color:' +
|
this.colors.primary +
|
'} ' +
|
cssText;
|
}
|
},
|
getIndexStyle(url) {
|
let that = this;
|
var request = new XMLHttpRequest();
|
request.open('GET', url);
|
request.onreadystatechange = function () {
|
if (
|
request.readyState === 4 &&
|
(request.status == 200 || request.status == 304)
|
) {
|
// 调用本地的如果拿不到会得到html,html是不行的
|
if (request.response && !/DOCTYPE/gi.test(request.response)) {
|
that.originalStyle = that.getStyleTemplate(request.response);
|
that.writeNewStyle();
|
} else {
|
that.originalStyle = '';
|
}
|
} else {
|
that.originalStyle = '';
|
}
|
};
|
request.send(null);
|
},
|
getStyleTemplate(data) {
|
const colorMap = {
|
'#3a8ee6': 'shade-1',
|
'#409eff': 'primary',
|
'#53a8ff': 'light-1',
|
'#66b1ff': 'light-2',
|
'#79bbff': 'light-3',
|
'#8cc5ff': 'light-4',
|
'#a0cfff': 'light-5',
|
'#b3d8ff': 'light-6',
|
'#c6e2ff': 'light-7',
|
'#d9ecff': 'light-8',
|
'#ecf5ff': 'light-9',
|
};
|
Object.keys(colorMap).forEach((key) => {
|
const value = colorMap[key];
|
data = data.replace(new RegExp(key, 'ig'), value);
|
});
|
return data;
|
},
|
},
|
mounted() {
|
// 默认从线上官方拉取最新css,2秒钟后做一个检查没有拉到就从本地在拉下
|
let that = this;
|
// 如果是记住用户的状态就需要，在主题切换的时候记录颜色值，在下次打开的时候从新赋值
|
this.colors.primary = localStorage.getItem('color') || this.colors.primary; //例如
|
this.getIndexStyle(this.cssUrl[0]);
|
|
setTimeout(function () {
|
if (that.originalStyle) {
|
return;
|
} else {
|
that.getIndexStyle(that.cssUrl[1]);
|
}
|
}, 2000);
|
this.$nextTick(() => {
|
// 获取页面一共引入了多少个style 文件
|
this.originalStylesheetCount = document.styleSheets.length;
|
this.setSwitchColor();
|
});
|
},
|
};
|
</script>
|
<style></style>
|
