轉(zhuǎn)自
http://www.itdecent.cn/p/53e4a1c0bd62
。。。
該一鍵換膚只是定義好幾個(gè)顏色，并進(jìn)行簡單的切換。
在src下的assets文件下面定義一個(gè)css文件夾，在對應(yīng)的文件里面定義_handle.scss和_themes.scss文件，如下：
image.png
2.在_themes.scss文件里面定義好需要用到的幾個(gè)樣式。如下：
/***? _themes.scss*? 當(dāng)HTML的data-theme為blue時(shí)，樣式引用blue*? data-theme為其他值時(shí)，就采用對應(yīng)的默認(rèn)樣式*? 這里我定義了5套主題方案，想要再多只需在`$themes`里加就行了*? 注意一點(diǎn)是，每套配色方案里的key可以自定義但必須一致，不然就會(huì)混亂*? 這是定義好的對應(yīng)變量的顏色（需要什么都可以自行定義并引用）：*? 字體： font_color1*? 背景： background_color1*? 邊框： border_color1**/$themes: (? blue: (? ? font_color1: #0056cc,? ? background_color1: #0056cc,? ? border_color1: #0056cc,? ),? glup: (? ? font_color1: #e426fd,? ? background_color1: #e426fd,? ? border_color1: #e426fd,? ),? red: (? ? ? font_color1: #fd5451,? ? background_color1: #fd5451,? ? border_color1: #fd5451,? ),? green: (? ? ? font_color1: #0dd78d,? ? background_color1: #0dd78d,? ? border_color1: #0dd78d,? ),? yellow: (? ? ? font_color1: #feae4d,? ? background_color1: #feae4d,? ? border_color1: #feae4d,? ),);
3.在_handle.scss文件里面首先引入_themes.scss文件，在遍歷主題并根據(jù)key，聲明一個(gè)獲取顏色的function，接著使用@mixin和@include獲取字體顏色。如下：
/**
*? 在_themes.scss里面定義好自己需要的東西在該文件夾下面進(jìn)行遍歷和定義
**/@import"./_themes.scss";//遍歷主題map@mixin themeify{@each$theme-name,$theme-map in$themes{//!global 把局部變量強(qiáng)升為全局變量$theme-map:$theme-map!global;//判斷html的data-theme的屬性值? #{}是sass的插值表達(dá)式//& sass嵌套里的父容器標(biāo)識(shí)? @content是混合器插槽，像vue的slot[data-theme="#{$theme-name}"]&{@content;}}}//聲明一個(gè)根據(jù)Key獲取顏色的function@functionthemed($key){@returnmap-get($theme-map,$key);}//獲取background-color背景顏色@mixinbackground_color($color){@includethemeify{background-color:themed($color)!important;}}//獲取字體顏色@mixinfont_color($color){@includethemeify{color:themed($color)!important;}}//獲取邊框顏色@mixinborder_color($color){@includethemeify{border-color:themed($color)!important;}}//獲取左邊框顏色@mixinborder_colorLeft($color){@includethemeify{border-left-color:themed($color)!important;}}
4.因?yàn)樾枰鼡Q顏色的.vue文件比較多，需要在全局中引入對應(yīng)的_handle.scss文件。（引入方式請參考對應(yīng)的鏈接內(nèi)容：http://www.itdecent.cn/p/6db9d1872e9e
）
5.定義一個(gè).vue文件，在里面進(jìn)行對應(yīng)一鍵換膚的功能操作。如下：
<template><divclass="box"><divclass="color_content"><divclass="content_div1"@click="theme('blue')"></div><divclass="content_div1 content_div2"@click="theme('glup')"></div><divclass="content_div1 content_div3"@click="theme('red')"></div><divclass="content_div1 content_div4"@click="theme('green')"></div><divclass="content_div1 content_div5"@click="theme('yellow')"></div></div></div></template><script>export default {? methods: {? ? // 點(diǎn)擊對應(yīng)的顏色塊進(jìn)行意見換膚? ? theme(type){? ? ? // 將對應(yīng)的數(shù)據(jù)存儲(chǔ)到sessionStorage，方便后續(xù)使用? ? ? sessionStorage.setItem('type',type)? ? ? // 全局添加樣式名稱：data-theme，并在sessionStorage獲取對應(yīng)的樣式名稱的值。? ? ? window.document.documentElement.setAttribute( "data-theme", sessionStorage.getItem('type'));? ? }? },}</script><stylelang="scss"scoped>.color_content{? width: 550px;? height: 120px;? margin: 0 auto;? display: flex;? align-items: center;? justify-content: center;? background: #fff;? border-radius: 2px;? box-shadow: -2px 5px 12px 4px #f0f0f0;? .content_div1{? ? width: 80px;? ? height: 80px;? ? margin-right: 25px;? ? background: #0056cc;? ? cursor: pointer;? }? .content_div2{? ? background: #e426fd;? }? .content_div3{? ? background: #fd5451;? }? .content_div4{? ? background: #0dd78d;? }? .content_div5{? ? background: #feae4d;? ? margin-right: 0px;? }}</style>
6.在需要換顏色的地方添加對應(yīng)的樣式。如下：
//? 字體顏色@includefont_color("font_color1");//? 邊框顏色@includeborder_color("border_color1");//? 背景顏色@includebackground_color("background_color1");
7.但還存在一個(gè)問題，就是刷新頁面的時(shí)候?qū)?yīng)一鍵換膚之后的顏色會(huì)丟失，所以需要在App.vue中進(jìn)行一些操作。如下：
<script>export default {? name: 'App',? created(){? ? //? 獲取sessionStorage中存進(jìn)去的type? ? console.log(sessionStorage.getItem('type'))? ? /**? ? ? *? 判斷 sessionStorage 中的 type 是否為空，如果為空的話，就給默認(rèn)的顏色（頁面初始化的顏色），如? ? *? 果不為空的話就將對應(yīng)獲取到的值給到 data-theme? ? **/? ? if(sessionStorage.getItem('type') != null){? ? ? window.document.documentElement.setAttribute( "data-theme", sessionStorage.getItem('type'));? ? }else{? ? ? window.document.documentElement.setAttribute( "data-theme", 'red');? ? }? },}</script>
8.還有最重要的幾點(diǎn)：
如果一鍵換膚之后，只有在本機(jī)對應(yīng)的當(dāng)前瀏覽器頁面上有用，如果換個(gè)瀏覽器進(jìn)行登錄或者在其他電腦上進(jìn)行登錄，那么一鍵換膚后的效果并不會(huì)體現(xiàn)在頁面上，頁面默認(rèn)展示的樣式是最開始的。
如果需要一鍵換膚之后在不同的電腦或?yàn)g覽器上體現(xiàn)一鍵換膚之后的效果需要與后端配合，至于怎么配合相信大家應(yīng)該都知道，我就不多說了。
9.最后貼一下一鍵換膚的效果圖。如下：
111.gif
作者：席小麗
鏈接：http://www.itdecent.cn/p/1faf4977b825
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
