vue+less 를 사용 하여 간단 한 스킨 케 어 기능 을 실현 하 는 예제

스킨 케 어 효 과 는 간단 하지만 상단 내 비게 이 션 배경 색 의 변화 일 뿐이다.다음은 효과 도.
 
우선,먼저 나의 최초의 생각 을 말 해 보 자.
제 최초의 생각 은 less 정의 변 수 를 사용 한 다음 에 js 를 통 해 변 수 를 전환 하고 전환 하 는 변 수 를 통 해 피부 전환 효 과 를 얻 는 것 입 니 다.
먼저 theme.less 파일 을 새로 만 들 었 습 니 다.코드 는 다음 과 같 습 니 다.

 @theme:@themea;
 @themea:pink;
 @themeb:blue;
 @themec:gray;

제 가 처음에 생각 했 던 것 처럼 이 벤트 를 클릭 해서 변수@theme 의 값 을 바 꿔 야 합 니 다.
저 는 element-ui 라 는 프레임 워 크 를 사 용 했 기 때문에 드 롭 다운 메뉴 의 코드 도 복잡 하지 않 습 니 다.

<el-dropdown class="colorBtn " trigger="click" @command="changeColor">
 <span class="el-dropdown-link " >  </span>
 <el-dropdown-menu slot="dropdown">
 <el-dropdown-item command="a" @click="change_type(a)">   </el-dropdown-item>
 <el-dropdown-item command="b" @click="change_type(b)">   </el-dropdown-item>
 <el-dropdown-item command="c" @click="change_type(c)">   </el-dropdown-item>
 </el-dropdown-menu>
</el-dropdown>

이벤트 의 리 셋 이 벤트 를 command 이벤트 에 연결 하려 면 클릭 하 십시오.changeColor 방법 을 정 의 했 습 니 다.

  changeColor(command){
  console.log(command);//            command
 }

그래서 문제 가 생 겼 습 니 다.이벤트 클릭 을 통 해@theme 의 값 을 어떻게 바 꿉 니까?나 는 깊 은 생각 에 잠 겼 다.
마침내 우회 적 으로 문 제 를 해결 하 는 방법 을 찾 았 다.사실 처음에는 생각 도 문 제 없 었 지만 다시 포장 해 야 했다.어떻게 포장 할 까요?우 리 는 비록 잠시 변수 값 을 제어 할 수 없 지만,우 리 는 원소 의 클래스 이름 을 제어 할 수 있다.
우 리 는 스킨 을 바 꾸 는 부분 을 less 함수 로 추출 하여 theme.less 코드 를 아래 코드 로 바 꿀 수 있다.
그 중에서@backcolor 는 배경 색 이 고@fcolor 는 글꼴 색 입 니 다.

.theme(@backcolor:#EEA2AD,@fcolor:#fff) {
 .header {
 color: @fcolor;
 background: @backcolor;
 width: 100%;
 height: 2rem;
 position: relative;

 h4 {
  width: 100%;
  text-align: center;
  line-height: 2rem;
  font-size: 1rem;
 }
 .go-back {
  width: 2rem;
  height: 2rem;
  text-align: center;
  color: #fff;
  font-size: 0.8rem;
  float: left;
  line-height: 2rem;
  margin-left: 1rem;
  position: absolute;
  left: 0;
  top: 0;
 }
 .header-cont {
  width: 100%;
  text-align: center;
  line-height: 2rem;
  font-size: 1rem;
  color: #fff;
 }
 .colorBtn {
  width: 2rem;
  height: 2rem;
  text-align: center;
  color: #fff;
  font-size: 0.8rem;
  line-height: 2rem;
  margin-right: 1rem;
  position: absolute;
  top: 0;
  right: 0;
 }
 }
}

color.less 를 새로 만 들 고 다양한 피부 스타일 을 설정 합 니 다.여기 서 다른 피부 스타일 입 니 다.저 는 themea,themeb,themec...로 구성 요소 의 command 값 을 표시 합 니 다.내 가 분홍색 을 클릭 할 때,상응하는 함 수 를 호출 하여 원소 에 상응하는 클래스 이름 을 추가 합 니 다.인용 theme.less 잊 지 마 세 요.

 @import url('./theme.less');
  .themea{
   .theme();//     
  }
  .themeb{
   .theme(blue,#fff);
  }
  .themec{
   .theme(#111,#999);
  }

스킨 을 바 꾸 는 드 롭 다운 메뉴 를 클릭 할 때 사용 하 는 changeColor 방법 은 요소 에 서로 다른 이름 을 추가 해 야 합 니 다.물론 color.less 파일 은 참조 하 십시오.

 changeColor(command){
  console.log(command);
  document.getElementById('app').className ='theme'+command ;
 }

이 부분 에서 처음에 저도 문제 가 생 겼 습 니 다.바로 제 가 처음에 이 페이지 의 스타일 만 따로 뽑 았 기 때문에 다른 구성 요소 의 머리 스타일 은 변 하지 않 았 습 니 다.제 첫 번 째 생각 은 쿠키 를 사용 하 는 것 이 었 습 니 다.어,나중에 한 페이지 인 이상 저 는 스타일 을 비교적 꼭대기 층 의 요소 에 연결 하면 되 지 않 을까요?
결과,뻔 해!!!
지난번 에 바 뀐 피 부 를 기억 하려 면 localstorage 를 사 용 했 습 니 다.매번 스킨 을 바 꾸 는 주 제 를 기록 한 다음 에 페이지 가 렌 더 링 되 기 전에 이 주제 가 있 는 지 판단 하면 됩 니 다.효 과 는 다음 과 같다.
 
위 에서 vue+less 를 사용 하여 간단 한 스킨 케 어 기능 을 실현 하 는 예 는 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.