Vue+Sassダイナミックスキンケアを実現

本明細書で実装される動的スキンケアは、elementUIの公式サイトのようにColorPickerを使用してリアルタイムにトピックを変更する効果ではなく、システムに予め設定されたいくつかのトピックに色を事前に設定し、オンラインでトピックを変更するイベントをトリガーします.
まずluanxiyuan先生のブログの案内に感謝します.
この方案はSassのmap遍歴、関数定義、mapアクセス、ミキサーなどの関連知識に関し、具体的なAPI詳細は公式サイトを参照する.https://www.sass.hk/docs/.
大体の考え方はhtmlルートラベルにdata-theme属性を設定し、jsでdata-themeの属性値を切り替え、sassはこの属性に基づいて対応するテーマ変数の使用を判断することである.
具体的な実装手順は、私のV 5システム(dark、light)の2つのテーマを例に挙げます.
1.sassファイルを定義する_themes.scssは、システム内の2つのトピックの関連色変数を格納し、ファイルの場所はstyleまたはassetsディレクトリの下に置くことができ、コードは以下の通りです.

//      &   map  ，  V5          ，        
//            ，    key   ，key      ，    $%_   ，
// sass      ，      
//        UI  ，      element-ui，       dark  ，
//data-theme dark ，    dark
//data-theme     ，      elementui     
$themes: (
  light: (
    font_color1: rgb(196, 193, 193),
    font_color2: rgb(110, 109, 109),
    background_color1: rgb(255, 0, 21),
    background_color2: rgb(87, 87, 226),
    border_color1: rgb(231, 181, 181),
    border_color2: rgb(9, 255, 0)
  ),
  dark: (
    font_color1: rgb(226, 222, 222),
    font_color2: rgb(255, 255, 255),
    background_color1: rgb(87, 87, 226),
    background_color2: rgb(255, 0, 21),
    border_color1: rgb(9, 255, 0),
    border_color2: rgb(231, 181, 181)
  )
);

ここでは、対応するトピックの色変数のセットをそれぞれ格納するmap-$themesを定義します.
なお、scssファイル名は下線で始まることをお勧めします.themes.scssは、実行時に個別のcssファイルにコンパイルされることを防止し、sass中国語チュートリアル(3.1 sassファイルインポート)を参照してください.
2.別のsassファイルを定義_handle.scssは1の$theme変数を操作します(もちろん2つのファイルは結合できますが、別々に書くのは構成と操作をデカップリングしたいのです).

@import "@/style/_themes.scss";
//    sass map  、  、map  、        ，
//  API  https://www.sass.hk/docs/

//    map
@mixin themeify {
  @each $theme-name, $theme-map in $themes {
    //!global             
    $theme-map: $theme-map !global;
    //     html data-theme      #{} sass      
    //& sass            @content      ， vue slot
    [data-theme="#{$theme-name}"] & {
      @content;
    }
  }
}
//      Key     function
@function themed($key) {
  @return map-get($theme-map, $key);
}

//                    、    、                  
//      
@mixin background_color($color) {
  @include themeify {
    background-color: themed($color);
  }
}
//      
@mixin font_color($color) {
  @include themeify {
    color: themed($color);
  }
}
//      
@mixin border_color($color) {
  @include themeify {
    border-color: themed($color);
  }
}

自分の使用シーンに基づいてミキサーをカスタマイズすることができます.上には3つの一般的なものしか定義されていません.テーマを変更するのは背景&枠線&フォントなどの色を変更することにほかならません.
3.具体的にはvueで使用し、対応するミキサーを直接導入すればよい.どの色を取り、どのkeyを伝えるかは、このように簡単である

これで終わりです.htmlのプロパティdata-themeの値をどのように動的に切り替えるかについては、簡単に熟知し、jsはどのようにしてもいいです.次の例を挙げます.

export default {
  name: "HelloWorld",
  methods: {
    toggleTheme(index) {
      window.document.documentElement.setAttribute(
        "data-theme",
        index ? "dark" : "light"
      );
    }
  }
};</code></pre> 
  <p>  over，        color，    。                ，    ！</p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1295448792648196096"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">
                    
                     
                

興味があるかもしれません

rubyでhadoopのmapreduceを書きjarパッケージを生成する方法
wudixiaotie
mapreduce

JAvaプログラミング思想--アクセス制御権限
ユリはお茶じゃない
java アクセス制御権限 単一モード

[生物と医学]ザリガニは慎重に食べてください
comsci
せいぶつ

org.apache.jasper.JasperException: Unable to compile class for JSP:
ビジネスマン
maven 2.2 jdk1.8

ごみを処理したの?GC
oloz
GC

shiroとSESSSION
楊白
shiro

モバイルインターネット端末淘宝客はどのように利益を実現するか
みかん
モバイルクライアント 客をさらう 淘宝App

wordpressガジェット作成
aichenglong
wordpress ガジェット

アルファベットで分類:
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その他
トップページ -
私たちについて -
構内検索 -
Sitemap -
権利侵害苦情
著作権すべてのIT知識ベースCopyRight© 2000-2050 IT知識ベースIT 610.com , All Rights Reserved.
京ICP備09083238号