• <nav id="ecmkk"></nav>
  • 分享最實用的技術,創造更大的價值

    基于vue和scss采用uniapp開發主題皮膚更換的實現

    基于vue和scss采用uniapp開發主題皮膚更換的實現

    小程序開發過程中,基于Vue如何使用scss實現換膚(更換主題)功能的開發?


    創軟小程序開發團隊經過梳理后簡單整理如下。


    首先,.scss 文件申明如下


    $color-primary:#fa436a; /* 主題顏色 */
    $color-primary-green:green; /* 更換的顏色 */
    $color-primary-blue:blue; /* 更換的顏色 */
    
    
    @mixin color_primary($color){/*通過該函數設置字體顏色,后期方便統一管理;*/
      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); /* 采用函數調用 */
    }


    最后,在js中設置更換皮膚

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


    Vue中如何使用scss實現換膚功能的主要原理


    通過設置html的attribute屬性在封裝的函數中進行判斷,進行相應的設置不同的顏色


    css中 [ ] 可以識別到在html標簽上設置的屬性,所以在html上對應屬性發生變化時,就會執行相應的樣式,


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



    聯系
    QQ
    電話
    咨詢電話:189-8199-7898
    TOP
    亚洲中文字幕aⅴ天堂
  • <nav id="ecmkk"></nav>