Vue에서 스킨을 변경하는 방법은 무엇입니까?

이 글은 주로 Vue 스킨 변경 사례를 소개하고 참고용으로 올려드립니다.

최근 회사에서 진행한 프로젝트에서 웹사이트 스킨 리스킨, 즉 테마 전환 요청이 들어왔습니다. 그렇다면 테마 색상을 전환하는 방법은 무엇입니까? 테마 색상을 전환하는 것은 실제로 CSS를 전환하는 것과 같습니다. 하지만 프로젝트에서는 CSS만 변경하는 것이 아니라 테마에 따라 아이콘과 그림도 전환해야 합니다. 그래서 Vue에서 스키닝하는 과정을 기록하는 글을 썼고, 그 효과를 먼저 살펴보겠습니다.

이 글은 주로 CSS 전환, 아이콘 전환, 이미지 전환의 세 부분으로 구성됩니다.

CSS 전환

CSS 색상 전환에 관해서는 ElementUI 솔루션을 검색해서 참고했습니다. 일반적으로 4단계로 나누어져 있습니다.

정적 디렉터리에 theme.css 파일을 만들고 필요한 CSS를 추가합니다. 이 파일에서 모든 선택적 테마를 선언하세요.

.side-bar {
 background: linear-gradient(#B7A3FF, #879FFF) !important;
}

.side-bar .account-info {
 background: #8981D8 !important;
}

. 각 색상은 쉽게 식별할 수 있도록 키워드에 해당합니다.

colors: [{
 themeId: 1,
 familyPrimary: '#B7A3FF',
 familySecondary: '#879FFF',
 sideBarTop: '#8981D8'
}, {
 themeId: 2,
 familyPrimary: '#FDC5C5',
 familySecondary: '#F070A0',
 sideBarTop: '#E7829F'
}, {
 themeId: 3,
 familyPrimary: '#414D6C',
 familySecondary: '#2D1E3C',
 sideBarTop: '#423C50'
}]

AJAX를 통해 theme.css를 가져오고 색상 값을 키워드로 바꿉니다.

 getFile(`/static/theme.css`)
  .then(({data}) => {
   let style = getStyleTemplate(data)
  })

function getStyleTemplate (data) {
 const colorMap = {
  '#B7A3FF': 'familyPrimary',
  '#879FFF': 'familySecondary',
  '#8981D8': 'sideBarTop'
 }
 Object.keys(colorMap).forEach(key => {
  const value = colorMap[key]
  data = data.replace(new RegExp(key, 'ig'), value)
 })
 return data
}

키워드를 방금 생성된 해당 컬러 값으로 다시 교체하고, 페이지에 스타일 태그를 추가합니다

 getFile(`/static/theme.css`)
  .then(({data}) => {
   let style = getStyleTemplate(data)
   writeNewStyle(style, this.color)
  })

function writeNewStyle (originalStyle, colors) {
 let oldEl = document.getElementById('temp-style')
 let cssText = originalStyle
 Object.keys(colors).forEach(key => {
  cssText = cssText.replace(new RegExp(key, 'ig'), colors[key])
 })
 const style = document.createElement('style')
 style.innerText = cssText
 style.id = 'temp-style'
 oldEl ? document.head.replaceChild(style, oldEl) : document.head.appendChild(style)
}

아이콘 전환

프로젝트를 처음 시작할 때 스킨 변경의 필요성을 고려하지 않았기 때문에, 그래서 모든 아이콘은 img 태그를 사용하여 참조됩니다.

 <img src="../../assets/icon_edit.svg">

이로 인해 아이콘의 색상을 동적으로 전환할 수 없게 되므로 대신 글꼴 파일의 아이콘을 사용하기로 결정했습니다. 이미지를 글꼴 파일로 쉽게 변환할 수 있는 추천 웹사이트인 icomoon을 소개합니다. 아이콘은 폰트를 통해 사용하기에도 매우 적합합니다. 아이콘의 크기와 색상을 보다 편리하게 수정할 수 있습니다.

온라인 변환을 통해 다운로드한 글꼴 파일을 프로젝트에 넣고 새로운 CSS 파일을 생성하여 모든 아이콘을 선언합니다.

@font-face {
 font-family: 'icomoon';
 src: url('../assets/fonts/icomoon.eot?vpkwno');
 src: url('../assets/fonts/icomoon.eot?vpkwno#iefix') format('embedded-opentype'),
 url('../assets/fonts/icomoon.ttf?vpkwno') format('truetype'),
 url('../assets/fonts/icomoon.woff?vpkwno') format('woff'),
 url('../assets/fonts/icomoon.svg?vpkwno#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
 /* use !important to prevent issues with browser extensions that change fonts */
 font-family: 'icomoon' !important;
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 vertical-align: sub;

 /* Better Font Rendering =========== */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.icon-edit:before {
 content: "\e900";
}

그런 다음 CSS 클래스 이름을 통해 아이콘을 참조할 수 있습니다.

 <span class="icon-edit"></span>

테마를 효과적으로 만들려면 아이콘의 CSS를 theme.css 파일에 작성해야 합니다.

.icon_edit:before {
 background-image: linear-gradient(-135deg, #879FFF 0%, #B7A3FF 100%);
}

이미지 전환

프로젝트에는 자리 표시자 이미지나 기타 이미지가 많이 있습니다. 테마 변경으로 변경됩니다. 모든 사진을 소개하고 파일 이름을 사용하여 다양한 테마에 해당하는 사진을 구별합니다. 클릭 시 테마 전환 시 해당 테마에 해당하는 파일로 전환되어 이미지 전환이 가능합니다. 이를 위해 믹스인을 작성하고 컴포넌트에 믹스인을 도입했습니다.

<img :src="userImg || placeholderWoman">

placeholderMixin

let callback
const placeholderMixin = {
 data () {
  return {
   placeholderWoman: '',
   placeHolderNoReply: '',
   placeHolderNothing: ''
  }
 },
 created () {
  let themeId = localStorage.getItem('themeId')
  let theme = themeId2Name(themeId)
  this.setThemeValue(theme)
  callback = (theme) => {
   this.setThemeValue(theme)
  }
  bus.$on('changeTheme', callback)
 },
 destroyed () {
  bus.$off('changeTheme', callback)
 },
 methods: {
  setThemeValue (theme) {
   this.placeholderWoman = require(`@/assets/placeholder_woman_${theme}.svg`)
   this.placeHolderNoReply = require(`@/assets/icon_noreply_${theme}.svg`)
   this.placeHolderNothing = require(`@/assets/icon_nothing_${theme}.svg`)
  }
 }
}

테마를 전환하기 위해 클릭하면 ChangeTheme 이벤트가 발생합니다. 각 구성 요소가 ChangeTheme 이벤트를 받으면 이미지 값을 다시 할당하여 이미지 전환 효과를 얻습니다.

let theme = themeId2Name(this.themeId)
bus.$emit('changeTheme', theme)

이 방법도 테마 전환 효과를 얻을 수 있지만 이 방법을 사용하려면 거의 모든 비즈니스 구성 요소에 믹스인을 도입해야 합니다. 더 좋은 방법이 있으면 언제든지 문의해 주세요.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

부트스트랩에서 테이블 지원 높이 백분율을 구현하는 방법

Vue2.0에서 하위 형제 구성 요소 간의 데이터 상호 작용을 구현하는 방법

vue에서 사용자 정의 전역 메서드를 구현하는 방법

위 내용은 Vue에서 스킨을 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!