elementUI——主题定制
时间:2019-12-13
本文章向大家介绍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:
页面:
<template> <div> <el-button @click="changeTheme('theme1')"> theme1 </el-button> <el-button @click="changeTheme('theme2')"> theme2 </el-button> <el-button @click="changeTheme('theme3')"> theme3 </el-button> </div> </template> <script> export default { methods: { changeTheme (theme) { window.document.documentElement.setAttribute('data-theme', theme) } } } </script> <style scoped="" lang="scss"> </style>
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); } }
参考推荐:
https://github.com/ElemeFE/element/issues/3054
原文地址:https://www.cnblogs.com/wheatCatcher/p/11689990.html
- ASP.NET AJAX(13)__利用Microsoft AJAX Library开发客户端组件Sys.Component成员Sys.IDisposable成员Sys.INotifyDisposin
- 设计模式专题(七)——建造者模式
- ASP.NET AJAX(14)__UpdatePanel与服务器端脚本控件脚本控件的作用脚本控件的指责Extender模型脚本控件和Extender模型在PostBack中保持状态在UpdatePa
- ASP.NET AJAX(15)__构建高性能ASP.NET AJAX应用UpdatePanel的性能问题使用UpdatePanel的注意事项脚本加载避免脚本阻塞页面显示AjaxControlTool
- LINQ to SQL(1):基础入门
- 设计模式专题(十)——观察者模式
- LINQ to SQL(2):生成对象模型
- 使用 Oracle 的 Security External Password Store 功能实现数据库加密登陆
- LINQ to SQL(3):增删改查
- LINQ to SQL(4):OR设计器
- 在不同浏览器都实用的各窗口大小获取方法
- JavaScript获得对象属性个数的方法
- 设计模式专题(十一)——抽象工厂模式
- Canvas 图形组合方式
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【Flutter 实战】全局点击空白处隐藏键盘
- 我对Flutter的第一次失望
- 【Flutter 实战】各种各样形状的组件
- 『Flutter-绘制篇』实现炫酷的雨雪特效
- 图书管理系统(Servlet+Jsp+Java+Mysql,附下载演示地址)
- Vuex 映射完全指南
- 我们是如何改进YOLOv3进行红外小目标检测的?
- Unity3D网络通讯(三)-- HttpRestful请求的简单封装
- 详解Elasticsearch 的性能优化
- console.log的那件事
- Codeforces Round #668 (Div. 2)A-D
- nodejs源码解析之udp服务器
- LeetCode | 35.搜索插入位置
- Redis | 源码阅读 —— 字符串
- 一个小白的角度看JavaScript Promise 完整指南