Vueでスキンを変更するにはどうすればよいですか?

この記事では主に Vue スキンの再形成の実践例を紹介しますので、参考にしてください。

最近、会社が行ったプロジェクトで、Webサイトのスキンのリスキン、つまりテーマの切り替えのリクエストを受けました。では、テーマカラーを切り替えるにはどうすればよいでしょうか?テーマカラーを切り替えるということは、実際にはCSSを切り替えることになりますが、プロジェクトではCSSだけでなくアイコンや画像もテーマに合わせて切り替える必要があります。ということで、Vueでスキン変更を実装する過程を記録する記事を書きましたので、まずはその効果を見てみましょう。

この記事は主にCSS切り替え、アイコン切り替え、画像切り替えの3つのパートに分かれています。

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 タグを使用して参照されます。これにより、アイコンの色を動的に切り替えることができなくなります。そのため、代わりにフォント ファイル内のアイコンを使用することにしました。画像を簡単にフォントファイルに変換できるおすすめサイト「icomoon」を紹介します。アイコンはフォントを使用して使用するのにも非常に適しており、アイコンのサイズと色をより便利に変更できます。

オンライン変換を通じて、ダウンロードしたフォントファイルをプロジェクトに配置し、すべてのアイコンを宣言するための新しいCSSファイルを作成します。

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

これで、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をtheme.cssファイルに書き込む必要もあります

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

プロジェクトには多くのプレースホルダー画像や他の画像もあります。テーマの変更に応じて変更されます。すべての画像を紹介し、ファイル名を使用して、さまざまなテーマに対応する画像を区別します。クリックしてテーマを切り替えると、テーマに対応したファイルに切り替わり、画像を切り替えることができます。これを行うために、ミックスインを作成し、そのミックスインをコンポーネントに導入しました。

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

placeholderMixin

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

クリックしてテーマを切り替えると、changeTheme イベントが発行され、各コンポーネントがchangeTheme イベントを受け取ると、画像の値が再割り当てされ、画像を切り替える効果が得られます。

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`)
  }
 }
}

これでもテーマを切り替える効果が得られますが、この方法ではほぼすべてのビジネスコンポーネントにミックスインを導入する必要があります。より良い方法があれば、お気軽にご連絡ください。

上記は私があなたのためにまとめたものです。

関連記事:

以上がVueでスキンを変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。