基于vue和scss采用(yòng)uniapp開發主題皮膚更換的實現

在小(xiǎo)程序開發過程中(zhōng)，基于Vue如何使用(yòng)scss實現換膚(更換主題)功能(néng)的開發？

創軟小(xiǎo)程序開發團隊經過梳理(lǐ)後簡單整理(lǐ)如下。

首先，.scss 文(wén)件申明如下

$color-primary:#fa436a; /* 主題顔色 */
$color-primary-green:green; /* 更換的顔色 */
$color-primary-blue:blue; /* 更換的顔色 */


@mixin color_primary($color){/*通過該函數設置字體(tǐ)顔色，後期方便統一管理(lǐ)；*/
  color:$color;
  
  [data-theme="green"] & {
    color:$color-primary-green;
  }
  [data-theme="blue"] & {
    color:$color-primary-blue;
  }
  
}


/* 更換背景顔色采用(yòng)上面一樣的邏輯 */

其次，在頁(yè)面引用(yòng)中(zhōng)的代碼

.price{
    /*color: $color-primary;*/  /* 原始引用(yòng)方式，錯誤 */
    @include color_primary($color-primary); /* 采用(yòng)函數調用(yòng) */
}

最後，在js中(zhōng)設置更換皮膚

window.document.documentElement.setAttribute('data-theme', 'green'); /* */

Vue中(zhōng)如何使用(yòng)scss實現換膚功能(néng)的主要原理(lǐ)

通過設置html的attribute屬性在封裝(zhuāng)的函數中(zhōng)進行判斷，進行相應的設置不同的顔色

css中(zhōng) [ ] 可(kě)以識别到在html标簽上設置的屬性，所以在html上對應屬性發生變化時，就會執行相應的樣式，

這一步有(yǒu)點類似于平時給div添加一個.active屬性，css自動執行相應樣式。