给用户提供n个可选主题色 选中颜色后更换整个系统图标,侧边栏等地方的颜色。
这里主要使用到了css的变量配合vuex传递的用户所选颜色 即可赋值给任意标签的css。
(最开始只使用vuex存储所选颜色并直接获取赋值给标签 这种办法设置的只能是行内样式 在elementui上的颜色效果会覆盖掉hover颜色 但并没有办法在行内设置hover 于是pass)
(css变量: 用--xxx来定义变量 用var来使用这个变量)
各位用上了的话欢迎给me点个赞呀~
vuex里提供主题色初始值
state: {
// 初始值
personality: "#fff",
themeColor: "--themeColor:#fff"
},
getters: {
// 监听值的变化
getpersonality: statr => {
return state.personality;
}
},
mutations: {
addcount(state, color) {
console.log(state, color);
state.personality = color;
state.themeColor = "--themeColor:" + color;
}
},
在用户选择颜色的页面methods增加方法 拿到所选颜色存值在vuex里
changeColor(index) {
// 传入一个当前值
this.colorIndex = index;
const colorMap = {
1: ["#ffffff", "#ffffff"],
2: ["#1890ff", "#1890ff"],
3: ["#222222", "#222222"],
4: ["#5d44fb", "#5d44fb"],
};
this.setColor(...colorMap[index]);
},
setColor(color1, color2) {
this.$store.commit("addcount", color1);
localStorage.setItem("personality", color2);
},
给全局的body里赋值vuex里存的颜色 (vue里的最外层#app标签或el-container处)
<el-container class="home"
:style="this.$store.state.themeColor">
最后就可以在任意页面的css里直接使用这个变量啦
/deep/ .save-btn {
background: var(--themeColor);
border-color: var(--themeColor);
border-radius: 4px;
font-weight: 500;
font-size: 14px;
color: #fff;
margin-top: 40px;
margin-left: 85px;
}