elementui原生属性_elementUI——主题定制
需求:
设计三套主题色+部分图标更换;
实现方式汇总:
1.传统做法,生成多套css主题包,切换link引入路径切换href实现,参考网站:http://jui.org/;或者是将多套样式一起打包,不过每套样式需要添加不同的前缀名称用于区分,这样直接在body上利用js切换class名称即可:
toggleClass(element, className) {if (!element || !className) {return;
}
element.className=className;
}//点击按钮切换
this.toggleClass(document.body, ‘theme-1‘);
2.饿了么官方demo:直接在页面上插入 style 标签样式,利用样式优先级强行覆盖(不推荐),具体步骤:
3.利用html引用css生效原生属性进行切换(推荐):如果是elementUI推荐使用sass,antd推荐使用less(注意编译速度);
window.document.documentElement.setAttribute(‘data-theme‘, ‘theme1’)
elementUI实战:
1.准备工作:
安装:vue+elementUI+sass
配置:以上版本问题、自行在官网查阅,关于sass推荐一个网站https://www.sassmeister.com/
2.demo:
页面:
theme1
theme2
theme3
methods: {
changeTheme (theme) {
window.document.documentElement.setAttribute(‘data-theme‘, theme)
}
}
}
sass配置:
1.主题文件theme.scss
//主题色
$font-color-theme1 : #3f8e4d;//字体默认颜色
$font-color-theme2 : red;//$background-color-theme1: #3f8e4d;//默认主题颜色
$background-color-theme2: red;
$font-color-shallow0 : #000;
$font-color-shallow1 : #111;
$font-color-shallow2 : #222;
$font-color-shallow3 : #333;
$font-color-shallow4 : #444;
$font-color-shallow5 : #555;
$font-color-shallow6 : #666;
$font-color-shallow7 : #777;
$font-color-shallow8 : #888;
$font-color-shallow9 : #999;//字体定义规范
$font_little_s:10px;
$font_little:12px;
$font_medium_s:14px;
$font_medium:16px;
$font_large_s:18px;
$font_large:20px;
2.公共变量文件
@import "./theme";/*引入配置*/@mixin font_size($size){/*通过该函数设置字体大小,后期方便统一管理;*/@include font-dpr($size);
}
@mixin font_color($color){/*通过该函数设置字体颜色,后期方便统一管理;*/color:$color;
[data-theme="theme1"] &{
color:$font-color-theme1;
}
[data-theme="theme2"] &{
color:$font-color-theme2;
}
}
@mixin bg_color($color){/*通过该函数设置主题颜色,后期方便统一管理;*/background-color:$color;
[data-theme="theme1"] &{
background-color:$background-color-theme1;
}
[data-theme="theme2"] &{
background-color:$background-color-theme2;
}
}
3.修改elment组件样式变量:如alert
@import "./common/var";
@include b(alert) {
width:100%;
padding: $--alert-padding;
margin:0;
box-sizing: border-box;
border-radius: $--alert-border-radius;
position: relative;//background-color: $--color-white;
@include bg_color(background-color);
overflow: hidden;
opacity:1;
display: flex;
align-items: center;
transition: opacity .2s;
@include when(light) {//默认
.el-alert__closebtn {//color: $--color-text-placeholder;
@include font_color(color);
}
}
参考推荐:
elementui原生属性_elementUI——主题定制相关推荐
- element ui需要引入样式吗_彻底学会element-ui按需引入和纯净主题定制
原标题:彻底学会element-ui按需引入和纯净主题定制 作者:wuwhs 来源:SegmentFault 思否社区 前言 手上有些项目用的element-ui,刚好有空琢磨一下怎么减小打包文件大小 ...
- vue中babel-plugin-component按需引入和element-ui 的主题定制,支持发布,上线
前言 目前项目用的vue + element-ui,之前有了解过element-ui真正的按需引入,也有了解到主题定制,之前的项目都是根据element-ui的类及标签,在全局或者局部进行一大堆样式覆 ...
- 2.vue3医疗在线问诊项目 - _登录模块 ==> 代码片段、css变量主题定制、cp-nav-bar组件封装、svg打包精灵图插件、cp-icon组件封装、表单校验、密码登录、短信验证码登录及两者
2.医疗在线问诊项目 - _登录模块 ==> 代码片段.css变量主题定制.cp-nav-bar组件封装.svg打包精灵图插件.cp-icon组件封装.表单校验.密码登录.短信验证码登录及两者的 ...
- ASP.NET MVC入门---实例演示:通过ContentResult实现主题定制
实例演示:通过ContentResult实现主题定制 由于可以通过ContentResult的ContentType属性指定媒体类型,所以我们不仅仅可以利用它来返回最终会在浏览器中显示的文本,还可以返 ...
- DIY Android之一--原生Android系统主题支持的设计和实现
口号:Android只是个Demo. 智能手机何其多,Symbian.WP.Android...,问题是原生的Android系统不支持主题定制. 于是我等看着花哨的主题资源包在市场上泛滥,前提:你先下 ...
- 车载导航应用中基于Sketch UI主题定制方案的实现
点击上方蓝字,关注高德技术! 1. 导读 关于应用的主题定制,相信大家或多或少都有接触,基本上,实现思路可以分为两类: 内置主题(应用内自定义style) 外部加载方式(资源apk形式.压缩资源.插件 ...
- css input光标粗细,如何用CSS原生属性caret-color改变input输入框光标颜色
表单对大家来说并不陌生,当然,我也不是来和大家聊怎么做表单或者处理表单的样式网格,因为这些对于大家来说都是小儿科的东西.而是来聊聊怎么改变表单控件中光标的颜色.日常开发中我们可能会有改变input光标 ...
- Essential Studio for Windows Forms发布2017 v2,持office 2016和主题定制
2019独角兽企业重金招聘Python工程师标准>>> Essential Studio for Windows Forms是一个帮您创建高性能的Windows应用程序的Window ...
- vue2.0-基于elementui换肤[自定义主题]
0. 直接上 预览链接 vue2.0-基于elementui换肤[自定义主题] 1. 项目增加主题组件 在项目的src/components下添加skin文件夹 skin文件获取地址 2. 项目增加自 ...
最新文章
- JAVA字符串前补零和后补零的快速方法
- h5红包雨代码_html5移动端手机微信抢红包雨代码
- linux migrations病毒守付进程分析
- eclipse lombok插件安装_如果你是Java架构师或项目经理,项目技术会允许使用Lombok吗?
- 基于 HTML5 网络拓扑图的快速开发之入门篇(二)
- Android批量打包 如何一秒内打完几百个apk渠道包
- Android硬件抽象层(HAL)概要介绍和学习计划
- classpath环境变量
- 王道考研 计算机网络1 计算机网络概念,组成,功能和分类
- jodd忽略ssl证书_关于java访问https资源时,忽略证书信任问题
- PHP - declare tick
- Windows下的 Redis 安装教程
- 关于怎样写商业计划书
- 爬虫就是python吗_python就是爬虫吗
- Scala实现WordCount简易案例
- C++实现Python变量
- 这样做数据可视化驾驶舱,高端大气,一目了然,领导不点赞都难
- Linux 安全缓解机制总结
- python使用tkinter库,封装操作excel为GUI程序
- 三、计算机网络的性能指标