前言

因为涉及到除了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 }

总结

希望能帮助到你！

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

vue+element如何一键换肤和保存换肤
因为有人问我如何一键换肤,我就随手做个案例,因为随手写的,里面命名就很随意了,但是不影响阅读. 1:assets目录下建立一个theme.scss 代码如下: .black{.alldiv{backg ...
Element UI主题换肤功能(基于vue-element-admin框架)
环境信息: 日期:2022-08-05 node版本:v14.15.4 "sass": "1.26.8", "sass-loader": & ...
vue+scss实现一键换肤
大概的思路就是给html根标签设置一个data-theme属性,然后通过js切换data-theme的属性值,Scss根据此属性来判断使用对应主题变量.这里可以选择持久化Vux配合存储属性或接口来保存 ...
Vue + Element UI+Scss + Vuex一键换肤 , 一键换字体大小 ,动态替换全局主题颜色
一.前言其实我这个写法每个UI库都通用 , 不局限于ElementUI , 看明白思路就知道怎么写了一键换肤 , 动态替换全局主题颜色功能已经实现很久了 , 在项目验收的时候出现了一个小问题 , ...
前端项目一键换肤vue+element(ColorPicker)
前端项目一键换肤 1.需要配色的都是用变量声明 2.增加颜色选择器 3.改变颜色,更改初始值 1.需要配色的都是用变量声明 /* 全局样式 */ body {// 无需改变--light_color_ ...
前端 “一键换肤“ 的几种方案
作者:熊的猫原文:https://juejin.cn/post/7063010855167721486 前端 "一键换肤" 的几种方案前言现在越来越多的网站都提供了拥有换肤( ...
前端 “一键换肤“ 的 N 种方案
前端瓶子君,关注公众号回复算法,加入前端编程面试算法每日一题群前言现在越来越多的网站都提供了拥有换肤(切换主题)功能,如 ElementUI[2],既是为了迎合用户需求,或是为了凸显自己特点,因 ...
vue 一键换肤换主题
该一键换肤只是定义好几个颜色,并进行简单的切换. 在src下的assets文件下面定义一个css文件夹,在对应的文件里面定义_handle.scss和_themes.scss文件,如下: image. ...
前端一键换肤的几种方案
现在越来越多的网站都提供了拥有换肤(切换主题)功能,如 ElementUI,既是为了迎合用户需求,或是为了凸显自己特点,因此提供了个性化定制的功能. 其实之前就想了解和实现 "一键换肤&qu ...

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

前言

1、新建类名

2、定义变量

3、使用

4、关于切换主题的逻辑

总结

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

最新文章

热门文章