Vue+Scss 테마 색상 을 동적 으로 전환 하여 피 부 를 바 꾸 는 예제 코드

미리 설 정 된 배색 방안 에 따라 전단 에서 동적 전환 시스템 테마 색상 을 구현 합 니 다.
대략적인 사고방식 은 html 루트 탭 에 data-theme 속성 을 설정 한 다음 에 js 를 통 해 data-theme 의 속성 값 을 전환 하 는 것 이다.Scss 는 이 속성 에 따라 대응 하 는 테마 변 수 를 판단 한다.사용자 가 선택 한 테 마 를 저장 하기 위해 서 는 Vux 나 인 터 페 이 스 를 영구적 으로 선택 할 수 있 습 니 다.
1.우선 프로젝트 에 설정 Scss 를 다운로드 해 야 합 니 다.
1.설치 의존

npm install node-sass sass-loader --save-dev

2.build 에서 webpack.base.conf.js 를 찾 아 rules 에 scss 규칙 을 추가 합 니 다.

{
test: /\.scss$/,
loaders: ['style', 'css', 'sass'v]
}

3.vue 파일 에서 사용

<style lang='scss' scoped>
</style>

2.vue 프로젝트 전역 에 scss 도입
1.sas-resources-loader 설치

npm install sass-resources-loader --save-dev

2.그리고 build 의 utils.js 를 수정 합 니 다.
장차

scss: generateLoaders('sass')

다음으로 변경:

scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
//    scss       
resources: path.resolve(__dirname, '../src/style/_common.scss')
}
}
)

3.준비 작업 을 이미 마 쳤 습 니 다.
1.Scss 파일 새로 만 들 기themes.scss,다른 테마 배색 방안 을 설정 할 수 있 습 니 다.

// HTML data-theme dark ，    dark
//data-theme     ，           
//             ，       `$themes`     
//     ，        key          ，      

$themes: (

light: (
//  
font_color1: #414141,
font_color2: white,

//  
background_color1: #fff,
background_color2: #f0f2f5,
background_color3: red,
background_color4: #2674e7,

//  
border_color1: #3d414a,

),

dark: (
//  
font_color1: #a7a7a7,
font_color2: white,

//  
background_color1: #1b2531,
background_color2: #283142,
background_color3: #1e6ceb,
background_color4: #323e4e,

//  
border_color1: #3d414a,

)
);

테마 에 대응 하 는 색상 변 수 를 각각 저장 하 는 map-$themes 를 정의 합 니 다.
scss 파일 이름 은 밑줄 로 시작 하 는 것 을 권장 합 니 다.예 를 들 어themes.scss,실행 시 별도의 css 파일 로 컴 파일 되 는 것 을 방지 합 니 다.
2.다른 sas 파일 정의handle.scss 는 1 의$theme 변 수 를 조작 합 니 다.

@import "./_themes.scss";

//    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)!important;
}
}

//      
@mixin font_color($color) {
@include themeify {
color: themed($color)!important;
}
}

//      
@mixin border_color($color) {
@include themeify {
border-color: themed($color)!important;
}
}

themeify 방법 은 HTML 의 data-theme 값 을 가 져 오 는 데 사 용 됩 니 다.
themed 방법 은 HTML 의 data-theme 값 및 호출 자 에 의 해 전 달 된 key 에 사용 합 니 다themes.scss 에서 해당 하 는 색상 을 가 져 옵 니 다.
위 에 서 는 자신의 사용 장면 에 따라 믹서 를 사용자 정의 할 수 있 습 니 다.위 에 자주 사용 하 는 배경&테두리&글꼴 의 색상 만 정 의 됩 니 다.
3.vue 에서 구체 적 으로 사용 하고 대응 하 는 믹서 를 직접 도입 하면 됩 니 다.어떤 색 을 취하 고 어떤 key 를 전달 하 는 것 이 이렇게 간단 합 니 다.

<style lang="scss" scoped>
 @import "@/style/_handle.scss";

 .common-util {
  font-size: 18px;
  @include font_color("font_color1");
  @include background_color("background_color1");
  @include border_color("border_color1");
 }
</style>

3.js 를 사용 하여 HTML 의 속성 data-theme 값 을 동적 으로 전환 합 니 다.
html

<DropdownMenu slot="list">
 <DropdownItem @click.native="theme('iview')">  </DropdownItem>
 <DropdownItem @click.native="theme('light')">  </DropdownItem>
 <DropdownItem @click.native="theme('dark')">  </DropdownItem>
</DropdownMenu>

js

//   
theme(type) {
this.$store.commit('upDate', {themeType: type});
window.document.documentElement.setAttribute( "data-theme", type );
}
        css           [data-theme="dark"]
[data-theme="dark"] .ivu-layout-sider,
[data-theme="dark"] .ivu-menu-light,
[data-theme="dark"] .ivu-layout-header {
background-color: #283142!important;
}

Vue+Scss 동적 전환 테마 색상 의 스킨 케 어 구현 을 위 한 예제 코드 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue Scss 스킨 케 어 내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!