Vue Element-ui 一键换肤的方案（第二种）

目录

前言

1、新建类名

2、定义变量

3、使用

 4、关于切换主题的逻辑

总结

---

前言

因为涉及到除了ui库以外的样式需要配置两个风格或者更多的颜色，所以有了这个方案的出现。

---

1、新建类名

首先在style找到element这个文件夹，在base-variable.scss里，我直接新建了两个类名，浅色与深色（项目里只需要用到这两个主题色）

2、定义变量

   在这两个类名里，写的颜色变量一定要一致，

 

  遵循scss规则，在两个类名里，定义颜色变量以后，再次定义一个以--开头的颜色变量，这个就是我们后面在vue文件里需要用到的颜色变量，

 

3、使用

 4、关于切换主题的逻辑

这是写在一个js文件里的，然后，需要啥就用啥。

 // 存储值
 function saveStorage(theme) {
    window.sessionStorage.setItem('theme', theme);
    toggleClass(document.body,`custom-${theme}`)
 }
 // 获取值
 function getTheme() {
  let theme = window.sessionStorage.getItem('theme') || '52ffff';
  console.log(theme, 'theme')
  toggleClass(document.body,`custom-${theme}`)
 }

 function toggleClass(element, className) {
  if (!element || !className) {
    return;
  }
  element.className = className;
}

 export { saveStorage,getTheme,toggleClass }

---

总结

希望能帮助到你！