vue-基於elementui換膚[自定義主題]

前言:
這篇文章記錄換膚的兩個方面:
1.基於elementui這個ui框架的換膚
2.在vue項目裏自己寫的內容的換膚
所用知識:
vue , elementui , vuex , sass , gulp-css-wrap

首行祭圖:
這裏寫圖片描述
源碼地址: https://github.com/EmilyYoung71415/vue-admin-elementui
思路在此:
改變原有的elementui主題:
安裝elementui的自定義主題工具,然後初始化變量文件,得到elementui的scss文件,我們修改顏色就修改他的scss文件,然後編譯scss文件得到css文件,我們引用修改好了的css文件[實現覆蓋elementui的css文件]即可實現換膚。
至於動態換膚:
用上述方法生成不同主題[顏色值]的css文件後,我們怎麼實現動態切換呢?
我的辦法是:

  1. 生成不同的css顏色文件,每個文件內部命名前加上.custom-顏色值做命名空間。
  2. 然後app.vue裏引入全部的顏色文件。
  3. 用戶點擊某顏色,就在body加上class:custom-00a597
    這樣通過body的class改變就能實現真正使用不同的css文件。

1.將css文件裏面加上特定的.XX類名 比如
這裏寫圖片描述
如顏色值爲#00a597的css文件 ,我裏面的每個選擇器都加上了.custom-00a597
顏色值爲#0000ff的css文件,加上了.custom-0000ff
怎麼批量加呢?
這裏使用gulp-css-wrap這個神器
具體細節請見另一篇博文:gulp-css-wrap工具的使用——[批量爲css文件擴展命名空間]
或者官方文檔:gulp
下面假裝你已經有了增加命名空間的各個主題css文件
2 app.vue裏引入全部的顏色文件
[當然也可以按需引入,動態的加載css]

//一個簡單的動態加載css的栗子
var head = document.getElementsByTagName('HEAD').item(0);
var style = document.createElement('link');
style.href = 'style.css';
style.rel = 'stylesheet';
style.type = 'text/css';
head.appendChild(style);

這裏我簡單粗暴地一次性完全載入:
這裏寫圖片描述

3 用戶點擊某顏色,就在body加上class:custom-00a597
//類似於document.body.className = ‘custom-00a597’

這裏寫圖片描述
這裏寫圖片描述
思路大概如上,具體的細節如下:

1. Vue的elementUI實現自定義主題

使用vue開發項目,用到elementUI,根據官網的寫法,我們可以自定義主題來適應我們的項目要求
Element官網上也提供了自定義主題的方案
同時也提供了一個在線自定義主題的demo
按照官方文檔,我們可以有兩種辦法實現自定義換膚。
一.第一種方法:使用命令行主題工具
二.第二種方法: 直接修改element樣式變量[前提是項目中使用scss編寫]
現在我做的這個項目用的是第一種,因爲第一種可以生成css文件,我們要在生成的css前面加各個類名。

1.1 使用命令行主題工具生成css文件

1.1.1 用vue-cli安裝一個新項目:

1.1.2 安裝elementUI及sass-loader,node-sass

(項目中使用scss編寫需要依賴的插件)

//安裝elementui
npm i element-ui -S
//安裝sass
npm i sass-loader node-sass -D

1.1.3 安裝elementui的自定義主題工具

//首先安裝主題工具
npm i element-theme -g
//然後安裝chalk主題
npm i element-theme-chalk -D

1.1.4 初始化變量文件

et -i [可以自定義變量文件,默認爲element-variables.scss]

> ✔ Generator variables file

這時根目錄下會產生element-variables.scss(或自定義的文件),大致如下:

$--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */

$--color-success: #67c23a !default;
$--color-warning: #eb9e05 !default;
$--color-danger: #fa5555 !default;
$--color-info: #878d99 !default;

...

code is cheap ,show me the “截圖 ”
這裏寫圖片描述

1.1.5 修改變量

直接編輯 element-variables.scss 文件,例如修改主題色爲自己所需要的顏色(如: 紫色(purple))

$--color-primary: purple;

1.1.6 編譯主題

et

> ✔ build theme font
> ✔ build element theme

編譯完之後會在根目錄生成theme的文件夾
這裏寫圖片描述
我們只需要引入theme/index.css即可

1.1.7 引入自定義主題

最後一步,將編譯好的主題文件引入項目(編譯的文件默認在根目錄下的theme文件下,也可以通過 -o 參數指定打包目錄),在入口文件main.js中引入

import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'

Vue.use(ElementUI)

1.1.8 測試是否改變成功

    <div>
      <el-button>默認按鈕</el-button>
      <el-button type="primary">主要按鈕</el-button>
      <el-button type="success">成功按鈕</el-button>
      <el-button type="info">信息按鈕</el-button>
      <el-button type="warning">警告按鈕</el-button>
      <el-button type="danger">危險按鈕</el-button>
    </div>

以上便是完成了第一步生成不同的css顏色文件。
然後我們要在不同的css文件裏擴展命令空間

1.2 不同的css文件裏的每個元素外面包裹一個獨特的class名字

方法:使用gulp-css-wrap神器
具體使用見另一篇博文:gulp-css-wrap工具的使用——[批量爲css文件擴展命名空間]
打廣告X2 【逃
這裏讓我們快進到已經生成好的那一步[就像美食節目做菜一秒快進到熟的感覺]

1.3 動態切換

1.3.1 將修改好的不同css顏色文件放到一個文件夾裏

這裏寫圖片描述
我下面的common.scss是用於自己寫的內容的換膚。這個之後再講

1.3.2 動態切換邏輯:

  1. 當前顏色值存在vuex裏。修改或拿取都通過vuex管理
    這裏寫圖片描述

2.用戶點擊顏色值v-model綁定
這裏寫圖片描述
即是對應頁面的這裏:
這裏寫圖片描述
3. 剛開始載入的時候主題色是vuex的默認值
watch顏色值的改變,一旦改變就調用vuex的函數
這裏寫圖片描述

2. Vue的自定義內容實現主題顏色切換

思路:
1.與生成各個顏色不同的css文件類似,我們對應不同的主題定義不同的css,只不過可以用sass解決。
mixi.scss 定義的五個主題顏色
這裏寫圖片描述
common.scss
這裏寫圖片描述
2. app.vue 引入common.scss
這裏寫圖片描述
3.然後同樣的動態切換class名字
這裏寫圖片描述

參考鏈接:

手摸手,帶你用vue擼後臺 系列三(實戰篇)

vue移動助手實踐(一)——基於vue的換膚功能

基於ElementUI的網站換主題的一些思考與實現

Vue的elementUI實現自定義主題

換膚問題有沒有解決方案

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章