VueとElementUIを組み合わせたスキン変更ソリューション

前面に書かれた

スキン変更機能はあまり一般的ではありませんが、需要もあるため、参考までにフロントエンドのスキン変更ソリューションをいくつか紹介します。

この記事では、VueとElement-UIをベースにしたいくつかのスキニングソリューションを紹介し、わかりやすく使いやすいものを目指します。気に入っていただければ幸いです。

解決策 1: グローバル スタイル オーバーライドを使用する (フロントエンドに共通)

これは最も一般的で、考えやすく、実装しやすいソリューションです。

特定の名前 (.blue-theme など) から始まる別のスタイル シート (css ファイル deep space blue.css) を作成し、この css ファイルで 2 番目のスキンのスタイル コードを完成させます。次に、スキンの変更をクリックすると、body タグに blue-theme クラスが追加されます。この時点で、スキンの変更効果が表示されます。

ここでスペース ブルーをクリックすると、body に science-blue クラスが追加され、ブロンズ グリーンをクリックすると、デフォルトがブロンズ グリーンであるため、science-blue クラスが削除されます。

解決策2: 独自のElement-uiカラースキームをカスタマイズする

デフォルトの要素の配色は次のとおりです。

Element-UI には、カスタム カラー マッチング ツールと設定ページも用意されています。このツールまたはこのページを通じて、上記の 5 つのメイン カラーと補助色をカスタマイズできます。

設定後、ツールの場合は生成し、Web ページの場合はダウンロードします。設定したテーマ スタイル ファイルであるスタイル ファイルを取得します。

CSS ファイルとフォント ディレクトリの関係を変更せずに (ps: これは非常に重要です)、プロジェクトに配置します。 (この CSS ファイルの名前は好きな名前に変更できます。たとえば、私は theme-summer.css に変更しました)

次に、プロジェクトの main.js で、Element-UI の元の CSS ファイルのインポートをコメント アウトし、プロジェクトに追加した CSS ファイルをインポートします。

このとき、プロジェクト内の Element-UI の色が、先ほどカスタマイズした配色になります。 （以下は私がカスタマイズした色のセットですが、どう思いますか？）

ただし、これによって、プロジェクト内の Element-UI のデフォルトの色が希望どおりに変更されるだけであることに気付きましたか? ただし、私たちがやりたいのはスキンを変更することであり、色を切り替えることができることを期待しています。

そのため、上記の方法を使用して、生成されたCSSファイル内の各CSSスタイルに一意の命名プレフィックスを追加し、スキンを変更するときにこのクラスをボディに追加します。このようにして、豊富なスキン変更機能も実現できます（美しいカラースキームの多くのセットを自分で一致させることができるため）。

ここで解決しなければならない問題は、この CSS ファイルに名前空間を追加する方法です。

このツールによって生成された、または設定ページからエクスポートされた CSS ファイルを見てみましょう。各スタイルを手動でクラスでラップして名前空間を作成するのは非現実的であるため、この結果を実現するには、gulp プラグイン gulp-css-wrap を使用する必要があります。

初め：

npm i gulp gulp-clean-css gulp-css-wrap -D

次にgulpfile.jsを記述します

// gulpfile.js

var パス = require('パス')
var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var cssWrap = require('gulp-css-wrap')

var カスタムテーマ名 = '.theme-summer'

gulp.task('default', 関数() {
  gulp.src(path.resolve('./index.css')) を返します
    .pipe(cssWrap({セレクタ: customThemeName}))
    .pipe(クリーンCSS())
    .pipe(gulp.dest('dist'))
})

次にgulpを実行します

これにより、名前空間として .theme-summer を持つカスタム テーマが作成されます。

追加後は、先ほど紹介したbody要素のクラスを切り替える方法に従って、スキン切り替え機能を実装することができます。

解決策3: ウェブサイトの色を素早く変更する

Element の公式サイトによると、Element は SCSS で書かれています。プロジェクトでも SCSS を使用している場合は、プロジェクト内で Element のスタイル変数を直接変更できます。新しい element-variables.scss スタイル ファイルを作成します。 (注意: node-sass と sass-loader がインストールされていることを確認してください)

element-variables.scss ファイルはここには掲載されていません。ここで確認できます: element-variables.scss。このファイルでは、多くの色変数が定義されています。

この方法は使い方が簡単です。インポートするだけです

有効にするには、内部の色変数を変更します。

この方法は迅速で、いくつかの色変数を変更することで効果的になります。 （その後、展開できますよ〜）

ここで質問ですが、js のこの element-variables.scss ファイル内の変数を変更するにはどうすればよいでしょうか?これを実現できれば、リアルタイムの動的な色の変化が可能になります。

追加メモ: js を使用して scss 変数を変更するソリューションはありますが、プロジェクトで色を動的に変更することはできません。なぜでしょうか?プロジェクト内のすべての CSS プリコンパイル言語 (sass、less、stylus) は最終的に CSS にコンパイルされるため、パッケージ化されたプロジェクトにはコンパイルされた CSS ファイルのみが含まれます。そうすると、js を使用して scss 変数を変更する方法は、パッケージ化されたプロジェクトでは機能しなくなります。

解決策4: メインカラーをリアルタイムで変更する

スキンを変更する方法はいくつか紹介しましたが、それらはすべて当社が提供するスキンの限られた範囲内です。ただし、カラーピッカーがポップアップ表示され、ページのメインカラーが選択した色に即座に変更されるという要件があります。
ElementUI 公式サイトでは動的スキニングが実装されており、ユーザーは色の値をカスタマイズでき、表示効果もよりエレガントになります。 どのように実装されているか見てみましょう（実装の公式説明はこちら）

• Element-UI の現在のバージョンのスタイルファイルを取得する (オンライン XHR 取得)
• ユーザーが選択したテーマカラーに基づいて、対応する一連の色を生成します (たとえば、緑を選択した場合は、さまざまな程度の明るい緑、濃い緑などを生成します)。
• 色の置換（スタイル ファイル内の色を、生成された色に置き換えます）
• スタイルタグをページに直接追加し、生成されたスタイルを入力します。

技術的な実装の詳細を見てみましょう。コードを開いて確認することを強くお勧めします: https://github.com/Neveryu/vue-cms/blob/master/src/views/theme/index.vue#L167-L297)

1. まず、package.json を通じて element-ui のバージョン番号を取得し、バージョン番号に応じて対応するスタイルを要求する必要があります。

// チョークがない場合は、色を変更するのは初めてです。リモートでCSSファイルを取得してチョークに割り当てる必要があります
// 以降の色変更操作ではリモート取得は不要 if (!this.chalk) {
    定数 url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
    this.getCSSString(url, 'chalk') を待ちます
}

getCSSString メソッドは、リモート CSS リソース ファイルを取得するために使用される一般的な XHR メソッドです。

2. ユーザーが選択した色に応じて対応する色を生成する

/**
 * 色の HEX を渡して、この色の色合いのカラー配列を取得します * デフォルトのメインカラーは青であることがわかっていますが、実際の使用では、対応するライトブルーとダークブルーも必要です * @param {[string]]} theme [color]
 * @return {[array]} [明るい色と暗い色の対応する配列]
 */
getThemeCluster(テーマ) {
    // 詳細はコードを参照してください。ここでは書きません // ...
}

3. 色の置き換え

/* スタイルを更新 - 古い色変数を新しいものに置き換えます*/
スタイルを更新(スタイル、古いクラスタ、新しいクラスタ) {
  newStyle = スタイル
  oldCluster.forEach((色, インデックス) => {
    newStyle = newStyle.replace(新しい正規表現(色、'ig')、新しいクラスタ[インデックス])
  })
  新しいスタイルを返す
}

4. ページにスタイルタグを追加し、生成されたスタイルを入力します。

styleTag = document.getElementById(id) とします。
if (!styleTag) {
  styleTag = document.createElement('style')
  styleTag.setAttribute('id', id)
  document.head.appendChild(スタイルタグ)
}
styleTag.innerText = 新しいスタイル

初めて色を変更するときは、スタイル タグを作成して本文に追加する必要があります。それ以降の色の変更では、これを行う必要はありません。

さて、効果を見てみましょう:

ここに画像の説明を挿入

【オンラインデモ: vue-cms】
[ソースコード: github.com/Neveryu/vue-cms]

これで、Vue と ElementUI を組み合わせたスキン変更ソリューションに関するこの記事は終了です。Vue と ElementUI を組み合わせたスキン変更に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。