elementUI——主題定製

需求：

設計三套主題色+部分圖標更換；

實現方式彙總：

1.傳統做法，生成多套css主題包，切換link引入路徑切換href實現，參考網站：http://jui.org/；

 

<link id="skincolor" href="skin-default.css" rel="stylesheet" type="text/css">


document.getElementById('#skincolor').href = 'skin-red.css';

 

這種實現對於，顏色和主題多了的時候，維護起來就很麻煩，需要同時維護 n 個樣式文件，並且使用JS改變href屬性會帶來加載延遲，樣式切換不流暢，體驗也不好。

 

同時需要考慮切換時延時問題，解決方案：

https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets

 

示例：

 

1. <link href="reset.css" rel="stylesheet" type="text/css">
2. <link href="default.css" rel="stylesheet" type="text/css" title="Default Style">
3. <link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">
4. <link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic">

 

所有樣式表都可分爲3類：

 

• 沒有title屬性，rel屬性值僅僅是stylesheet的<link>無論如何都會加載並渲染，如reset.css；
• 有title屬性，rel屬性值僅僅是stylesheet的<link>作爲默認樣式CSS文件加載並渲染，如default.css；
• 有title屬性，rel屬性值同時包含alternate stylesheet的<link>作爲備選樣式CSS文件加載，默認不渲染，如red.css和green.css；

 

alternate意味備用，相當於是 css 預加載進來備用，所以不會有上面那種切換延時

 

 

或者是將多套樣式一起打包，不過每套樣式需要添加不同的前綴名稱用於區分，用內存換功能，這樣直接在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