vue,elementUI切換主題，自定義主題

本文介紹兩種elementUI切換主題色的方法

項目示例：http://test.ofoyou.com/theme/

git代碼：記得star哦，謝謝

1：官方提供的方法，直接修改scss文件達到修改目的，開發人員使用(比官網容易理解，有圖有真相)。

2：經過選顏色值在項目中達到換膚目的，用戶使用。此方法根據官方主題切換修改而來

先搭建項目：

　　npm install -g vue //全局安裝vue

　　npm install -g webpack //全局安裝webpack

　　npm install -g vue-cli //全局安裝vue-cli

　　---->

　　進入項目目錄--->

　　vue-init webpack  my-project （vue init webpack  my-project 這個官方已不用，使用會報錯）

　　

 　　而後一次作下去就行了--->

　　安裝elementUI ：npm i element-ui -S

　　安裝sass: npm install node-sass sass-loader --save-dev

　　項目結構 -----------------運行結果

　　       

 

1. 第一種方法，官方提供的方法，直接修改scss

　　在main.js引入elementUI,以及主題：（主題是能夠本身設置下載配置的--官方工具）

　　

　　而後在項目src->assets目錄下建立element-variables.scss 內容能夠從官網複製過來，  而後在main.js引入，見上圖註釋的代碼

　　  結束第一種，能夠隨便寫幾個element組件試試下

 

2：經過選顏色值在項目中達到換膚目的，根據官方修改主題項目修改而來

　　說明：項目主題分爲兩部分，一個是element組件主題，一個是本身定義組件或者DOM主題。

　　此方法主要思路就是：用戶先從線上拉去配置主題的css文件，當用戶更改顏色後，在把css文件裏面全部的顏色值

　　替換掉，而後把這個css文件從新插入到html中達到改變顏色。

　　在這裏都須要修改再方法1的基礎上進行擴展：在element-variables.scss添加 默認咱們本身設置的顏色。

　　固然這個顏色也能夠在其餘公共css修改。

　　1.    

　　2. 安裝兩個插件：

　　  npm install css-color-function  

　　  npm install object-assign

 　　3. 

　　4. 從 unpkg.com/element-ui/lib/theme-chalk/index.css 把最新css文件複製下來copy到項目靜態文件目錄中：

　　  由於：項目中是先從element官方拉取主題css,若是拉取不到再去本地找備用的。

  　　

　　5.接下來就是寫代碼了。在App.vue上引入自定義的修改主題組件，在隨便弄些element組件觀察變化：

　　  

　　5. 寫組件：Theme.vue　　

 <!-- 切換主題色  -->
<template>
    <div>
        <el-color-picker  @change="colorChange" v-model="colors.primary" ></el-color-picker>
    </div>
</template>
<script>
import generateColors from "../../utils/color";
import objectAssign from "object-assign";
export default {
    name: "App",
    data() {
        return {
            originalStylesheetCount: -1,//記錄當前已引入style數量
            originalStyle: "",//獲取拿到的.css的字符串
            colors: {
                //顏色選擇器默認顏色值,這個值要和element-variables同樣
                primary: "#409EFF"
            },
            // primaryColor: "", //提交成功後設置默認顏色
            cssUrl: [
                "//unpkg.com/element-ui/lib/theme-chalk/index.css",
                "./static/css/index.css"
            ]
        };
    },
    methods: {
        colorChange(e) {
            if(!e)return;
            localStorage.setItem('color',e)
            this.primaryColor = this.colors.primary;
            this.colors = objectAssign(
                {},
                this.colors,
                generateColors(this.colors.primary)
            );
            this.writeNewStyle();
        },
        writeNewStyle() {
            let cssText = this.originalStyle;
            Object.keys(this.colors).forEach(key => {
                cssText = cssText.replace(
                    new RegExp("(:|\\s+)" + key, "g"),
                    "$1" + this.colors[key]
                );
            });
            if (this.originalStylesheetCount === document.styleSheets.length) {
                // 若是以前沒有插入就插入
                const style = document.createElement("style");
                style.innerText =
                    ".primaryColor{background-color:" + this.colors.primary + "}" + cssText;
                document.head.appendChild(style);
            } else {
                // 若是以前沒有插入就修改
                document.head.lastChild.innerText =
                    ".primaryColor{background-color:" +
                    this.colors.primary +
                    "} " +
                    cssText;
            }
        },
        getIndexStyle(url) {
            let that = this;
            var request = new XMLHttpRequest();
            request.open("GET", url);
            request.onreadystatechange = function() {
                if (
                    request.readyState === 4 &&
                    (request.status == 200 || request.status == 304)
                ) {
                    // 調用本地的若是拿不到會獲得html,html是不行的
                    if (request.response && !/DOCTYPE/gi.test(request.response)) {
                        that.originalStyle = that.getStyleTemplate(request.response);
                        that.writeNewStyle()
                    } else {
                        that.originalStyle = "";
                    }
                } else {
                    that.originalStyle = "";
                }
            };
            request.send(null);
        },
        getStyleTemplate(data) {
            const colorMap = {
                "#3a8ee6": "shade-1",
                "#409eff": "primary",
                "#53a8ff": "light-1",
                "#66b1ff": "light-2",
                "#79bbff": "light-3",
                "#8cc5ff": "light-4",
                "#a0cfff": "light-5",
                "#b3d8ff": "light-6",
                "#c6e2ff": "light-7",
                "#d9ecff": "light-8",
                "#ecf5ff": "light-9"
            };
            Object.keys(colorMap).forEach(key => {
                const value = colorMap[key];
                data = data.replace(new RegExp(key, "ig"), value);
            });
            return data;
        }
    },
    mounted() {
        // 默認從線上官方拉取最新css,2秒鐘後作一個檢查沒有拉到就從本地在拉下
        let that = this;
        // 若是是記住用戶的狀態就須要，在主題切換的時候記錄顏色值，在下次打開的時候重新賦值
        this.colors.primary = localStorage.getItem('color')||this.colors.primary//例如
        this.getIndexStyle(this.cssUrl[0]);
        setTimeout(function() {
            if (that.originalStyle) {
                return;
            } else {
                that.getIndexStyle(that.cssUrl[1]);
            }
        }, 2000);
        this.$nextTick(() => {
            // 獲取頁面一共引入了多少個style 文件
            this.originalStylesheetCount = document.styleSheets.length;
        });
    }
};
</script>
<style>
</style>