vue 기반 스킨 케 어 기능 예시 코드

최근 한 달 동안 vue 의 모 바 일 데모 중 하 나 는 각 페이지 의 통일 적 인 스킨 케 어 기능 을 실현 하 는 것 이다.글 한 편 을 쓰 고 실현 과정 에서 겪 는 문제 들 을 쓰 려 고 합 니 다.
프로젝트 github 주소
프로젝트 github 주소
일단 실현 효 과 를 볼 게 요.
 
테마 색상 설정
이 치 를 따 지 는 이런 기능 을 나 는 이렇게 몇 가 지 를 말 할 수 있 고 단계별 로 실현 할 수 있다 고 생각한다.
1.색상 선택
2.scss 의 일부 소 규모 사용 방법(다 변수 CSS 값 의 일괄 설정)
3.전역 이벤트 버스 의 응용
1 색 값 의 선택 과 원칙
개미 금 복 의 디자인 안 내 를 보 는 것 을 추천 합 니 다.그 안에 흔히 볼 수 있 는 상호작용 과 인터페이스 디자인 에 대해 좋 은 안내 와 건 의 를 가지 고 있 습 니 다.책 을 좋아 하 는 사람 도 을 볼 수 있 습 니 다.
인터페이스 중의 색채 요소 에 대해 우 리 는 보통 시각 적 연속 성,즉 같은 색 채 를 유지 하고 같은 색 고리 의 색 값 을 사용 해 야 한다.
 
같은 링 에 있 는 색 값 을 한 세트 로 하면 더욱 조 화 롭 게 보일 수 있 습 니 다.
그래서 여기 서 ant design 의 건 의 를 통 해 특정한 색상 값 을 우리 의 시리즈 테마 색상 으로 합 니 다(구체 적 인 색상 값 은 홈 페이지 를 참조 하 세 요~)
 
어떤 특수 한 경우 에는 동전 을 던 지 는 페이지 의 두 가지 색깔 과 같은 색깔 의 차 이 를 나타 내야 한다.
 
2.형식 색 값 을 16 진수 색 값 으로 변환 합 니 다.
여기 서 우 리 는 테마 색상 의 투명 도 를 설정 하여 서로 다른 색 을 구분 한 다음 에 우 리 는\#123456 과 같은 16 진 색상 전역 변 수 를 우리 의 주제 로 저장 합 니 다.여기 서 우 리 는 이러한 형식의 색 값 을 rgba 가 표시 하 는 색 값 으로 바 꿔 야 합 니 다.코드 는 다음 과 같 습 니 다.예비 용 입 니 다.

hexToRgba (hex, opacity = 0.3) {
  let color = []
  let rgb = []
  hex = hex.replace(/#/, '')
  for (let i = 0; i < 3; i++) {
   color[i] = '0x' + hex.substr(i * 2, 2)
   rgb.push(parseInt(Number(color[i])))
  }
  return `rgba(${rgb.join(',')},${opacity})`
 }

3.scss 의 소 규모 용법
우 리 는 결국 우리 가 원 하 는 주제 색 을 얻 었 다.

$colors: #f04134, #00a854, #108ee9, #f5317f, #f56a00, #7265e6, #ffbf00, #00a2ae, #2e3238;

아주 직접적인 사고 입 니 다.우 리 는 각 view 페이지 에서 우리 가 테 마 를 설정 해 야 하 는 요소 의 색 을 정의 해 야 합 니 다.예 를 들 어 문자 와 icon 의 color,그리고 머리의 background 등 입 니 다.그래서 우 리 는 app 에서 하나의 color 변 수 를 정의 하여 각 view 구성 요소 에 보 내 고 이 전역 변 수 를 통 해 모든 경로 의 페이지 색상 을 제어 하여 서로 다른 주제 효 과 를 실현 합 니 다.
파견 의 실현 은 다음 부분 에서 우리 가 먼저 우리 의 첫 번 째 단 계 를 완성 하면 우 리 는 우리 의 수 요 를 쉽게 추출 할 수 있다 고 말 했다.
4 전역 색상 설정 및 저장
인터페이스의 작은 일:
저 는 첫 페이지 에서 이 기능 을 직접 실 현 했 습 니 다.프로젝트 에서 저 는 mint-ui 프레임 워 크 를 도 입 했 습 니 다.

<!-- O   -->
  <mt-popup v-model="changColor" position="bottom" class="color-panel">
   <div class="color-items">
     <span class="color-item" v-for="(item, $index) in colors" :key="$index" @click="chooseColor(item)">
      <span class="color-cycle" :class="'bg-color' + ($index + 1)"></span>
      </span>
   </div>
  </mt-popup>

그 다음 에 색 블록 div 의 표현 입 니 다.위 코드 에서 알 수 있 듯 이 저 는 이런 css 스타일 시트 가 쉽게 나타 납 니 다.

.bg-color1 {background: #f04134}
.bg-color2 {background: #f04134}
.bg-color3 {background: #f04134}
.bg-color4 {background: #f04134}
・・・

코드 를 쓸 때 우리 가 일반적으로 비슷 한 것 이 반복 되 는 것 을 발견 하면 연 기 를 시작 할 수 있 을 것 이 라 고 은근히 생각 합 니 다.그리고 이런 상황 은 프로젝트 가 증가 한 후에 글꼴 색상 이나 border 색상 을 단일 하 게 설정 하 는 스타일 시트 도 많이 나타 날 수 있 습 니 다.예 를 들 어 color 1,border Color 1.이렇게 모든 형식의 표현 은 우리 가 주제 색채 의 배열 에 따라 조목조목 써 야 하고 수정 원가 도 높 아 질 것 이다.그래서 나의 글 쓰기 스타일 은 이렇다.

// mixin.scss:
$colors: #f04134, #00a854, #108ee9, #f5317f, #f56a00, #7265e6, #ffbf00, #00a2ae, #2e3238;

// setColor.vue:
@import '~@/assets/mixin.scss';
・・・
@for $i from 1 to 10 {
    .bg-color#{$i} {
     background-color: nth($colors, $i)
    }
   }

scss 는 자주 사용 하 는 클래스 이름 의 끼 워 넣 기 외 에 도 많은.......................................................................이렇게 하면 색 의 스타일 이 어떻게 확대 되 고 변화 하 든 색 배경 테두리 가 되 는 것 이 좋 습 니 다.저 는 mixin 파일 의 색 값 만 유지 하면 됩 니 다.똑 같은 실천 도 프로젝트 의 글꼴 크기 와 간격 값 의 통일 에 응용 할 수 있 습 니 다.어쨌든 저 는 많이 체험 해 보 겠 습 니 다.
5.논리 적 인 사소한 일
이 프로젝트 에서 localstorage 는 기본적으로 데이터베이스 로 사용 되 기 때문에 색상 블록 설정 테 마 를 클릭 할 때 우 리 는 요청 을 하 는 척 하면 서 localstorage 에 우리 가 바 꾼 색상 을 저장 하면 됩 니 다.(./static/api.json 은 helloword 로 돌아 가 는 json 입 니 다.여기 서 이렇게 사용 하기 위해$bus 이벤트 버스 아래 에 서 는 전체적인 테마 색상 변 수 를 설정 하 는 역할 을 합 니 다.localstorage 시 뮬 레이 션 은 배경 에 설정 을 저장 하고 페이지 를 다시 열 때마다 이 설정 값 을 가 져 옵 니 다).지금까지 우리 의 설정 페이지 는 대체적으로 완성 되 었 습 니 다.

//           
  chooseColor (color) {
   this.$axios.get('./static/api.json')
    .then((data) => {
     this.$bus.$emit('set-theme', color)
     this.changColor = false
     localStorage.setItem('themeColor', color)
    })
    .catch((data) => {
     console.log(data)
    })
  }

6 사건 버스 활용
마지막 으로 중요 한 것 이 완성 되 지 않 았 습 니 다.this.$bus.$emit('set-theme',color)에서 선택 한 색상 을 전역 에 설정 합 니 다.제 코드 구 조 는 이 렇 습 니 다.
 
하위 구성 요소
는 홈 페이지 의 하위 구성 요소 입 니 다.처음에 우 리 는 app.vue(home.vue 와 다른 view 의 부모 구성 요소)에서 color 변 수 를 정의 하여 각 view 구성 요소 에 보 내 고 싶 습 니 다.그래서 이것 은 setColor 에서 app.vue 의 설정 색상 이 벤트 를 촉발 하고 하위 구성 요소 가 부모 구성 요소 로 통신 하 는 문제 입 니 다.
저 희 는 바 인 딩 이벤트 로 emit()와 직접 결합 할 수 있 습 니 다.app.vue 에서 setglobalColor 방법 을 정의 하고 router-view(home.vue 포함)에 연결 할 수 있 습 니 다.이 어 home 구성 요소 에서 setglobalColor 방법 을 계속 정의 할 수 있 습 니 다.이 루어 진 기능 은 emit('setglobalColor')가 app.vue 를 촉발 하 는 방법 입 니 다.그리고 home.vue 의 이 setglobalColor 를 구성 요소 에 계속 연결 합 니 다.구성 요소 에서 색상 을 선택 할 때 emit 라 는 방법 을 사용 하면 됩 니 다.
왜 저 는 사건 버스.vue 의 사건 버스 와 vuex 를 사용 하고 싶 습 니까?추구 하 는 프로그래머 들 에 게 항상 조 심 스 럽 습 니 다.저도 마찬가지 입 니 다.전체적인 것 과 관련 된 것 으로서 사용 할 수 있 으 면 사용 하지 않 고 코드 를 간소화 할 수 있다 고 생각 하기 때문에 우 리 는 항상 한 단 어 를 사용 하고 제창 하지 않 습 니 다.
그러나 어느 날 저 는 코드 의 가 독성 유지 가능성,성능 과'위험'보다 어느 것 이 더 중요 한 지 자주 생각 합 니 다.사건 버스 와 vuex 와 같은 전역 적 인 방안 에 대한 주요 우려 는 대부분이 그들 이 전역 적 인 것 이다.하나의 사건 명 변수 명 이 일치 하기 때문에 충돌 을 초래 할 수 있 고 소형 프로젝트 에 서 는 군더더기 와 추가 비용 을 초래 할 수 있다.그러나 사실 사건 과 변수의 명명 은 우 리 는 모두 약속 을 통 해 규범화 할 수 있 지만 표현 에 있어 사건 버스 와 vuex 프로젝트 를 사용 하여 성능 에 있어 서 직접 props 가 데 이 터 를 전달 하고 emit 리 셋 사건 의 프로젝트 에 비해 큰 차이 가 없 으 며 오히려 끝 이 없 는 props 와 emit 를 사용 하여 유지 하기 어 려 운 느낌 을 준다.위 와 같은 setglobalColor 는 2 층 구성 요 소 를 뛰 어 넘 는 것 만으로 도 과정 이 번 거 로 워 집 니 다.그래서 저 는 2 급 이상 의 구성 요소 차원 이 나타 나 고 데이터 흐름 이 약간 많은 프로젝트 에서 이렇게 할 수 있 으 며 전체적인 이벤트 버스 를 정의 하 는 것 을 제안 합 니 다.

export default (Vue) => {
 let eventHub = new Vue()
 Vue.prototype.$bus = {
  $on (...arg) {
   eventHub.$on(...arg)
  },
  $off (...arg) {
   eventHub.$off(...arg)
  },
  $emit (...arg) {
   eventHub.$emit(...arg)
  }
 }
}

이벤트 버스 를 현재 vue 대상 에 연결 합 니 다.사용 시:

this.$bus.$on('set-theme', (color) => {・・・ })
this.$bus.$emit('set-theme', '#000000')

이 demo 에서 app.vue 에 연결 되 었 습 니 다.

this.$bus.$on('set-theme', (color) => {
   this.loadingColor = color
   this.userinfo.color = color
  })

setColor.vue 에 서 는 색상 블록 을 클릭 할 때 this.$bus.$emit('set-theme',color)를 터치 하면 전체 색상 을 설정 하 는 효 과 를 얻 을 수 있 습 니 다.이러한 장점 은 여러 차원 을 뛰 어 넘 거나 형제 구성 요소 의 통신 에 있어 서 우 리 는 더 이상 번 거 로 운 props 가 필요 하지 않다 는 것 이다.예 를 들 어 나 는 header.vue 에서 도 this.$bus.$on('set-theme',(color)=>{})을 연결 했다.this.$bus.$emit 가 발생 할 때 header 의 배경 색 은 바로 바 뀔 수 있다.app.vue 가 전역 의 color 값 props 를 header.vue 에 전달 하 기 를 기다 릴 필요 가 없습니다.
다른 경로 의 페이지 구성 요소 와 app.vue 는 모두 직접적 으로 상하 관계 입 니 다.우 리 는 props 를 사용 하여 뚜렷 한 데 이 터 를 아래로 전달 합 니 다.demo 에서 저 는 color 를 userinfo(앞으로 다른 데이터 가 있 습 니 다)에 존재 합 니 다.userinfo 는 모든 하위 경로 에 전달 합 니 다.마지막 으로 모든 페이지 가 생 성 될 때 이 전체적인 색 을 가 져 옵 니 다.dom 으로 대응 하 는 스타일 을 바 꾸 면 됩 니 다.예 를 들 어...

mounted () {
  this.$nextTick(() => {
   //          ，        ，              
   this.$el.querySelector('.myTitle').style.color = this.userinfo.color
   this.$el.querySelector('.weui-btn_primary').style.backgroundColor = this.userinfo.color
   this.$el.querySelector('.add_icon').style.color = this.userinfo.color
  })
 }

상세 한 실현 은 프로젝트 코드 를 참조 하 십시오.여기 서 저 는 비교적 신기 한 점 만 골 라 서 토론 하 겠 습 니 다.프로젝트 와 코드 의 일부 규범 과 습관 은 매우 중요 합 니 다.좋 은 실천 이 서로 참고 하고 발전 하 기 를 바 랍 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.