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 标签样式,利用样式优先级强行覆盖(不推荐),具体步骤:

先把默认主题文件中涉及到颜色的 CSS 值替换成关键词

根据用户选择的主题色生成一系列对应的颜色值

把关键词再换回刚刚生成的相应的颜色值

直接在页面上加 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

时间: 2024-10-17 17:07:13

elementUI——主题定制的相关文章

博客主题定制

CSS: #blogTitle h2 { font-weight: normal; font-family: "华文楷体",sans-serif!important; font-size: .928571429rem; line-height: 1.846153846; color: #757575; float: left; } * { cursor: url(//www.jvruo.com/curr/normal.cur),auto; } /*添加按钮*/ .cnblogs-mar

【转载】如何正确使用cnblogsCSS定制

转自:http://www.cnblogs.com/rvalue/p/7265386.html 用过cnblogs的估计都知道cnblogs提供了相对比较开放的个性化选项,其中最为突出的估计就是页面CSS定制了.但是没学过Web前端的人可能并不会用这个东西... 所以我打算在此分享一些定制CSS过程中使用的奇技淫巧一些方法来帮助大家定制blog qwq 以后如果想到新的主意或者更好的表述的话估计还会回来更新一波...本博文不定期更新吧w 博主并非专业Web开发,所以可能有些语言不够严谨或者不够准

[技术] 如何正确食用cnblogs的CSS定制

用过cnblogs的估计都知道cnblogs提供了相对比较开放的个性化选项,其中最为突出的估计就是页面CSS定制了.但是没学过Web前端的人可能并不会用这个东西... 所以我打算在此分享一些定制CSS过程中使用的奇技淫巧一些方法来帮助大家定制blog qwq 博主并非专业Web开发,所以可能有些语言不够严谨或者不够准确还请谅解qwq 如果有表意模糊的地方也欢迎留言qwq 1.何谓CSS CSS,即层叠样式表,可以被认为是HTML的扩充,用于给HTML里结构化的内容指定显示方式,比如字体/背景/大

企业仿站 个人仿站 定制网站制作 phpcms插件开发 网站二次开发 phpcms二次开发

团队擅长项目 1.客客威客系系统系模版制作.仿站.二次开发程序 2.ecshop商城系统系模版制作.模版制作.程序二次开发.插件开发 3.phpcms系统模版制作.插件开发.程序二次开发 4.帝国cms系统模版制作.插件开发.程序二次开发 5.dedecms系统模版制作.插件开发.程序二次开发 6.Wordpress博客社区系统模版制作.插件开发.主题定制 7.Discuz论坛社区系统.模版制作.插件开发.仿站定制 网站运维: 3.liunx  环境安装  win2003 –win2012 环境

【技术】如何正确使用cnblogsCSS定制

转自:http://www.cnblogs.com/rvalue/p/7265386.html 用过cnblogs的估计都知道cnblogs提供了相对比较开放的个性化选项,其中最为突出的估计就是页面CSS定制了.但是没学过Web前端的人可能并不会用这个东西... 所以我打算在此分享一些定制CSS过程中使用的奇技淫巧一些方法来帮助大家定制blog qwq 以后如果想到新的主意或者更好的表述的话估计还会回来更新一波...本博文不定期更新吧w 博主并非专业Web开发,所以可能有些语言不够严谨或者不够准

aden 博客 外贸营销网站建设模板 wordpress主题 V2.2

aden wordpress主题是一个简单易用.简洁.现代的博客主题,对于wordpress初学者甚至是高级用户来说都是适合使用的.完全响应式,适合任何尺寸的显示,从低到高分辨率,支持所有的现代浏览器,并且使用Wordpress Live主题定制器可轻松进行个性定制. 这款主题在国外网站主题出售平台售价要16美金,现在你可以免费下载完整版! [主题特色]及时自定义多个博客布局置顶头部文章格式支持2个分页类型HTML5 & CSS3自定义小工具提供演示数据和说明文档等 [下载地址]http://w

element 如何自定义主题

自定义主题 在我学习element的时候,就直接忽略了.现在返回来学习一下 ,原来 通过自定义主题可以改变elemnt中默认的一些样式.这样,对于一些不想用elment自带但是用到比较多的样式,可以进行修改. 看了很多关于自定义主题的文章,其实都是 差不多的, 我想自己写一遍,加深一下印象,也希望能给别人带来帮助. 这篇博客的思路,总结性比较强,指的大家j借鉴:https://blog.csdn.net/young_emily/article/details/78591261 改变原有的elem

Bootstrap4默认样式不对胃口?教你使用NPM+Webpack+SASS来定制

Bootstrap 是一个流行的前端样式库,可以方便快速的构建应用,但默认样式可能不尽人意,本文就介绍如何使用 NPM, Webpack, SASS 针对它的源码来定制自己的主题.版本使用的是 Bootstrap v4.3.1. 本文提供了一个使用此方式编写的一个后台管理模板 Dunwoo Admin,文末有获取源码的方式. 安装 Node.js Webpack 是对前端资源进行打包和编译的工具,它依赖于 Node.js,首先介绍下如何配置和安装绿色版的 Node.js. 下载绿色版本:http

车载导航应用中基于Sketch UI主题实现

1.导读 关于应用的主题定制,相信大家或多或少都有接触,基本上,实现思路可以分为两类: 内置主题(应用内自定义style) 外部加载方式(资源apk形式.压缩资源.插件等) 其实,针对不同的主题定制实现思路,没有绝对的好坏,每种实现方案都有其利弊,重要的是如何去权衡.选择,根据实际的项目需求,痛点,制定一个符合实际项目需求,能够解决主题定制过程中痛点的方案才是好的方案. 由于我和团队一直是做车载导航应用开发,面向的对象是客户.不同的客户对于应用的UI或者主题是有不同需求的,也就是说针对不同客户,