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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • ホバープロンプトにはvue2+elementuiを使用する
  • Vue2.0+ElementUI+PageHelperで実装されたテーブルページング機能
  • Vue での ElementUI の使用に関する詳細な説明
  • フォームから Vue ElementUI を使用してログイン効果を実装する例
  • Vue ElementUI フォームのフォーム検証
  • Vue+ElementUI で超大規模なフォーム例を処理する方法

<<:  Canonical が Flutter で Linux デスクトップ アプリを有効化 (推奨)

>>:  MySQL ストレステストツールの使い方

推薦する

フォント宝庫 50 種類の素晴らしい無料英語フォントリソース パート 2

デザイナーは独自のフォント ライブラリを持っているため、プロジェクトの設計時にすぐに使用できます。今...

Windows で MySQL サービスを停止または削除できない問題の解決策

圧縮パッケージを解凍して Windows に MySQL をインストールしました。インストール方法は...

Vue 開発ガイドの重要な知識の要約

目次概要0. JavaScriptとWeb開発の基礎1. Vueの基本概念Vue コア機能コンポーネ...

JavaScriptのアロー関数の特徴と通常の関数との違い

目次1. 矢印関数の使用1. 通常関数から矢印関数へ2. 中括弧を省略してリターンする3. 括弧を省...

jsはテーブルの追加と削除の操作を動的に実装します

この記事の例では、jsでテーブルを動的に追加および削除するための具体的なコードを参考までに共有してい...

Linux ログ内のキーワードとその前後の情報を検索する方法の例

日常業務では、ログを表示する必要がよくあります。たとえば、 tail コマンドを使用してログをリアル...

MySQLテーブルのテーブル構造を素早く変更する方法

MySQL テーブルのテーブル構造をすばやく変更する - 「MySQL 管理」から抜粋 ALTER ...

docker イメージのプル速度が遅い問題の解決策

現在、Docker には中国向けの公式ミラーがあります。詳細については、https://www.do...

MYSQLについては、データ型と操作テーブルを知る必要があります

データ型と操作データテーブル1.1 MySQL 型: 整数 1.2 MySQL データ型: 浮動小数...

Alibaba Cloud Ubuntu 16.04でpptpdサービスを構築する方法

1. PPTP VPNを構築するには、ポート1723とGREプロトコルを開く必要があります。 1. ...

MySQL Undo ログと Redo ログの概要

目次元に戻すログUNDOログの生成と破棄UNDOログの保存元に戻すログ機能トランザクションの原子性の...

SQL の左結合と右結合の原理と例の分析

テーブルが 2 つあり、テーブル A のレコードがテーブル B に存在しない可能性があります。左結合...

DockerでPrometheusをインストールする詳細なチュートリアル

目次1. Node Exporterをインストールする2. cAdvisorをインストールする3. ...

MySQL の複合インデックスはどのように機能しますか?

目次背景複合インデックスを理解する左端一致原則フィールド順序の影響複合インデックスは単一のインデック...

Docker で Docker0 ブリッジのデフォルトのネットワーク セグメントを変更する方法

1. 背景Docker サービスが開始されると、デフォルトで docker0 ブリッジが作成され (...