1、theme,表示当前主题色,由于是存储在localStorage中的,所以先从localStorage中获取,然后才是基准色,我的基准色采用的是Element的默认颜色#409eff 2、originalStyle,这个变量存放的是element某个主题颜色的基础样式文件(element-ui的默认样式文件),其实本次主题切换的实质就是在element的基础样式文件上进行,通过修改该文...
1、通过package.json拿到element-ui的版本号 2、根据该版本号去请求相应的样式 3、通过正则匹配和替换颜色 4、动态添加style标签来覆盖重叠的css样式 优点:无需准备多套主题,可以自由动态换肤 缺点:自定义不够,只支持基础颜色的切换 附:详细代码 一、固定多套主题换肤 原理:本方法是最常见的换肤方式,本地存放多套...
在需要改变主题的地方重新设置缓存和data-theme 属性就可以实现了。 这样dom 操作就完成了。最后就是在页面写css样式了 在你的 .vue文件的scss中直接调用这些混合即可。 也是可以根据主题切换图片的 到此。主题切换功能就实现了。 但是要实现产品需求这样选择框和弹出框也统一的样式。势必要修改elementUI样式。
4. 从unpkg.com/element-ui/lib/theme-chalk/index.css把最新css文件复制下来copy到项目静态文件目录中: 因为:项目中是先从element官方拉取主题css,如果拉取不到再去本地找备用的。 5.接下来就是写代码了。在App.vue上引入自定义的修改主题组件,在随便弄些element组件观察变化: 5. 写组件:Theme.vue <!--...
B端业务中有个需求,不同的客户需要有自己的主题色, element-ui 官网提供的换肤方式不适用与用户自定义切换颜色(别问我为什么不升级,你懂得!),用户能切换的是内置好的,因为客户很多,不可能内置这么多主题。所以决定采用css变量来实现。说干就干~ 1. 根据element-ui官网提供的方案(项目使用的是less,所以使用ele提供...
一、参考element-ui中的主题切换 查看element-ui在切换主题时发送的请求 发现,它其实是通过把前端选择的主题色,当做参数,然后发送给后端,然后让后端生成一个新的css文件,再发给前端。 然后再通过js,将css设置到head中的style上,完成主题切换。 不过需要注意:返回的css文件,不仅仅是简单的将颜色替换为我们刚才选择的...
1、安装主题生成工具 npm i element-theme -g 2、安装白垩主题 npm i element-theme-chalk -D 3、初始化变量文件 et -i 执行完以上命令后,会在根目录下会生成element-variables.scss文件,里边包含了elementui中组件所用到的所有变量,像字体大小,颜色,背景颜色等。
element-ui主题 非element-ui主题 那么下面就分别来去处理这两块主题对应的内容 1:动态换肤实现方案分析 明确好了原理之后,接下来就来理一下咱们的实现思路。 从原理中可以得到以下两个关键信息: 动态换肤的关键是修改css 变量的值 换肤需要同时兼顾 element-ui ...
由于element-ui的样式单独维护,官方将它抽象出来做成命令行工具使用,实现换肤分为5步 1. 安装工具 a) 首先安装主题生成工具,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动,这里以全局安装做演示。 npm i element-theme -g ...
1.注释掉原element样式文件即:import 'element-ui/lib/theme-chalk/index.css';\ 2.引入自定义组件 * import Theme from "theme-vue"; // 引入 * const Th = new Theme(); // 创建修改主题对象 * Vue.prototype.$theme = Th; 3.XXX.vue