HeyUI組件庫 | 如何實如今線切換主題

目前支持在線切換主題的組件庫

若是有更多的，請在下方留言，我會後期補充。

ant-design

目前ant-design支持的切換主題顏色是在頁面最下方。

是的，若是你不仔細，你是不知道系統有這個功能的。

而後這裏要吐槽一個點，隨便切換什麼顏色都很卡，由於沒有確認按鈕，因此隨便調一個小顏色，也會去後端請求，值得改進....

ant-design使用的less，和HeyUI是一致的，而且也提供全局less變量定義功能，和Hey-Cli的globalVars也是差很少的功能。

antd的在線切換實際上是前端在線編譯的，因此速度比較卡頓，再加上顏色組件的設計，因此顯得更加卡了。

Element

其實餓了麼的切換主題色的功能是很明顯的，就在主頁上方位置。

切換顏色的交互我要狠狠的誇讚一番，有確認按鈕，切換順暢，一比較立竿見影。

而後餓了麼使用的是scss，其實都差很少的，由於主要功能大體都是差很少的。

HeyUI

HeyUI組件庫是在11月剛剛把切換主題的功能上線的。

固然，系統中配置主題，咱們一直是支持的，只是一直沒有嘗試實現官網切換主題的功能。

基於官網上次的改版，有人建議把下面四個顏色塊當作切換主題色的入口，我以爲挺好，因而抽空來實現了一下。

戳我去官網試試

實現方案

首先，ant-design和element是須要後端服務的，考慮到我想要的效果，我以爲改爲固定4個主題方案，這樣就能夠免了後端的服務。

關於HeyUI切換主題的方案有兩套，因爲須要直接轉換成css，因此選擇第二套方案：替換var.less中的變量定義。

具體參考文檔：更換主題

@import (less) "~heyui/themes/var.less";
//從新定義主題
@primary-color: #FDA729;
@red-color: #D64244;
@green-color: #3cb357;
@yellow-color: #EAC12C;
@blue-color: #77A2DC;
@import (less) "~heyui/themes/common.less";

//使用這種方式引用，能夠在本身的less文件中使用var.less定義的變量。
@import (less) "本身的less文件";
複製代碼

開發步驟

一、提取系統的less文件

官網系統以前只有一套主題，因此官網系統只有一個獨立的doc.less文件。

如今要生成4套主題，因此係統的樣式須要獨立出來。

- doc.less
- index.less
- var.less
複製代碼

index.less做爲系統默認的主題，doc.less是系統中定義的樣式。

二、定義四套主題

以下所示，在doc中新建themes文件夾，保存四套主題。

主題的大體內容就是定義樣式變量，引用系統中的less文件。

以yellow中的index.less爲例：

@import (less) "../../../themes/var.less";

// Color
@primary-color : #b6cf4d;
@link-color : @primary-color;
@blue-color : #356ba8; //info
@green-color : #378c2b; //success
@yellow-color : #aa9f30; //warn
@red-color : #8c2b3a; //error

@input-height: 32px;

@import (less) "../../../themes/common.less";
@import (less) "../../css/doc.less";

複製代碼

三、生成四套主題css文件

因爲四套主題都是須要異步加載的，因此須要先編譯成css文件。

這一點和ant-design以及element不同，他們都是使用後端實時生成css文件，可是大體的邏輯是一致的。

新建命令文件gencss.sh，而且執行：

lessc ./doc/themes/yellow/index.less>./doc/themes/yellow/index.css -x -rp=https://cdn.jsdelivr.net/npm/heyui/themes/fonts/
lessc ./doc/themes/red/index.less>./doc/themes/red/index.css -x -rp=https://cdn.jsdelivr.net/npm/heyui/themes/fonts/
lessc ./doc/themes/pink/index.less>./doc/themes/pink/index.css -x -rp=https://cdn.jsdelivr.net/npm/heyui/themes/fonts/
lessc ./doc/themes/lavender/index.less>./doc/themes/lavender/index.css -x -rp=https://cdn.jsdelivr.net/npm/heyui/themes/fonts/
複製代碼

四、Js調用切換css調用

在首頁的方法中添加css的調用方法。

dynamicLoadCss(type) {
  let old = document.getElementById('loadcss');
  var head = document.getElementsByTagName('head')[0];
  var link = document.createElement('link');
  link.type='text/css';
  link.rel = 'stylesheet';
  link.href = `/themes/${type}/index.css`;
  link.id = 'loadcss';
  head.appendChild(link);
  // delete old link
  if(old) {
    head.removeChild(old);
  }
}
複製代碼

至此，在線切換主題色的開發就完成了。

HeyUI

其實在10月份，HeyUI也完成走馬燈與穿梭框的開發。

若是感興趣，也能夠去看看：

• Carousel 走馬燈
• Transfer 穿梭框

或許你還對HeyUI不熟悉，歡迎去咱們的github參觀：

github.com/heyui/heyui

固然，star的行爲也是極其鼓勵的🙏🙏。

下週，咱們將計劃開發HeyUI的Admin系統，盡請期待。