基于vue和scss采用uniapp開發(fā)主題皮膚更換的實(shí)現(xiàn)

在小程序開發(fā)過程中，基于Vue如何使用scss實(shí)現(xiàn)換膚(更換主題)功能的開發(fā)？

創(chuàng)軟小程序開發(fā)團(tuán)隊(duì)經(jīng)過梳理后簡單整理如下。

首先，.scss 文件申明如下

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


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


/* 更換背景顏色采用上面一樣的邏輯 */

其次，在頁面引用中的代碼

.price{
    /*color: $color-primary;*/  /* 原始引用方式，錯誤 */
    @include color_primary($color-primary); /* 采用函數(shù)調(diào)用 */
}

最后，在js中設(shè)置更換皮膚

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

Vue中如何使用scss實(shí)現(xiàn)換膚功能的主要原理

通過設(shè)置html的attribute屬性在封裝的函數(shù)中進(jìn)行判斷，進(jìn)行相應(yīng)的設(shè)置不同的顏色

css中 [ ] 可以識別到在html標(biāo)簽上設(shè)置的屬性，所以在html上對應(yīng)屬性發(fā)生變化時，就會執(zhí)行相應(yīng)的樣式，

這一步有點(diǎn)類似于平時給div添加一個.active屬性，css自動執(zhí)行相應(yīng)樣式。