本文介紹兩種elementUI切換主題色的方法css
項目示例：http://test.ofoyou.com/theme/html
git代碼：記得star哦，謝謝vue
1：官方提供的方法，直接修改scss文件達到修改目的，開發人員使用(比官網容易理解，有圖有真相)。node
2：經過選顏色值在項目中達到換膚目的，用戶使用。此方法根據官方主題切換修改而來webpack
先搭建項目：git
npm install -g vue //全局安裝vuegithub
npm install -g webpack //全局安裝webpackweb
npm install -g vue-cli //全局安裝vue-clivue-cli
---->npm
進入項目目錄--->
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>