Vue+scss設定主題切換

表現形式

.demo[data-theme="default"]{
	color:#000;
}
//不同主題
.demo[data-theme="primary"]{
	color:#fff;
}
           

SCSS

定義主題

$themes:(
	default:(
    	color:#000,
    ),
    primary:(
    	color:#fff,
    ),
);
           

混入器

//定義混入器
@mixin theme{
    @each $name,$map in $themes{
		$map:$map !global;	//提升為全局變量
        &[data-theme="#{$name}"]{
			@content;		//接收混入
        }
    }
}
//設定主題資料
@function t($key){
	@return map-get($map,$key);
}
           

封裝子產品

@mixin box{
    @include theme{
		color:t('color');
        font-size:t("size");
    }
}

@include box;//使用
           

Vue

動态主題

<template>
	<div class="demo" :data-theme="theme"></div>
</template>
<script>
	export deafult{
		props:{
            /** 元件接收主題類型參數 */
            theme:{
				type:String,
            	default:'default',
            }
        }
    }
</script>
<style lang="scss" scope>
    @import 'theme.scss';	//引入scss檔案
    .demo{
		/** 調用混入器 */
        @include theme{
			color:t('color');
        }
    }
</style>
           

下載下傳支援

• 安裝scss

  npm i [email protected] -S
  npm i [email protected] -S