Vue ダイナミック バインディング アイコンの完全な手順

Vue ダイナミック バインディング アイコンの完全な手順

0 アイコンと画像の違い

アイコンは文字であり、画像はバイナリ ストリームです。つまり、画像はアイコンよりも読み込みが遅いため、アイコンを読み込むために img タグを使用しないことが最善です。import メソッドを使用してアイコンをコンポーネントとしてインポートし、タグとしてインポートすることができます。

1 svgをインストールする

1. 管理者として cmd ウィンドウを実行し、実行するプロジェクト ディレクトリに切り替えます。

npm に svg を追加

2 アイコンライブラリからアイコンをダウンロードする

1. Alibabaアイコンライブラリ

https://www.iconfont.cn/

2. svgをダウンロードする

3. compone ディレクトリの下に icons ディレクトリを作成し、特にアイコンを保存するために icons の下に svg ディレクトリを作成します。

3 プラグインの使い方を確認する

  • すべてのvueプラグインはnode_modulesにあります
  • ダウンロード時にプラグイン名に従ってプラグインe-cli-plugin-svgのREADMEを見つけます。

4 表示アイコン

1 動的コンポーネントMyIcon.vueを定義する

1. Myiconは親コンポーネントから渡されるプロパティです

2.computed は、myicon.name (アイコンの名前) に基づいてアイコン アドレスを動的に生成するために使用されます。その理由は、export default{} の外部でコンポーネントをインポートする場合、受け取った props 属性を export default{} の外部に渡すことができないため、computed を使用してアイコン コンポーネントを生成するためです。

3.:style は、幅と高さがバインドされる動的にバインドされたスタイルです。そして、props にデフォルト値を設定します。親コンポーネントが幅と高さの情報を渡さない場合は、デフォルト値が使用されます。

4.:fill は fill 属性スタイルにバインドされ、デフォルト値も props に設定されます。

<テンプレート>
	<div>
		<コンポーネント
			:is="アイコン"
			:style="{幅: myicon.width、高さ: myicon.hight}"
			:fill="myicon.fill"
		</コンポーネント>
		
	</div>
</テンプレート>

<スクリプト>
	
	エクスポートデフォルト{
		小道具:{
			マイアイコン:{
				名前:{
					タイプ:文字列
				},
				
				幅:{
					タイプ:文字列、
					デフォルト: '40px'
				},
				高さ:{
					タイプ:文字列、
					デフォルト: '40px'
				},
				埋める:{
					タイプ:文字列、
					デフォルト:'#000000'
				}
			}
			
			

		},
			
		計算:{
			アイコン(){
				return () => import('@/components/icons/svg/' + this.myicon.name + '.svg?inline')
			}
			
		}			
	}
</スクリプト>

<スタイル>	

</スタイル>

2 main.jsでコンポーネントMyIcon.vueをグローバルにインポートして定義します。

'@/components/MyIcon.vue' から mysvg をインポートします。
Vue.component('my-icon',mysvg)

3 親コンポーネントとしてmy-iconを呼び出す

1. myicon:{} に渡されるプロパティを定義します。name は必須フィールドで、サフィックスなしのアイコンの名前です。

<テンプレート>
	
					<私のアイコン
						:name = "スコープ行アイコン"
						:幅 = "50px"
						:height = "50px"
						:fill = "#ff00ff">
					</my-icon>
					
</テンプレート>

<スクリプト>
	
	
	
	エクスポートデフォルト{

		データ() {				
			戻る {		
				
				マイアイコン:{					
					名前: "位置",
					幅: "60px",
					高さ: "60px",
					塗りつぶし: "#ff00ff"					
				},

				

			}
		},
	}
</スクリプト>

<style スコープ lang="less">	
</スタイル>

要約する

これで、vue ダイナミック バインディング アイコンに関するこの記事は終了です。vue ダイナミック バインディング アイコンに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • VueルーティングでJWT認証を実装する方法
  • Vueカスタムコンポーネントはイベント修飾子を使用してピットレコードを踏む
  • Vue 名前付きスロットの基本的な使用例
  • Vue 初心者ガイド: 最初の Vue-cli スキャフォールディング プログラムの作成
  • Vue は左右のスライド効果のサンプルコードを実装します
  • VueとFlask間の通信の実装
  • Vueは双方向データバインディングを実装します
  • Vue 3.0 カスタムディレクティブの使い方
  • VueのID認証管理とテナント管理の詳細な説明

<<:  JDBC を使用して Mysql データベースに接続する際に発生する可能性のある問題の概要

>>:  Linux サーバーに Java Web プロジェクトをデプロイするための完全なチュートリアル

推薦する

ECMAScript の演算子を理解するための記事

目次単項演算子ブール演算子乗算演算子加法演算子関係演算子等価演算子条件演算子代入演算子カンマ演算子要...

CSS3を使って歌詞進行テキストカラー塗りつぶし変更の動的効果を実装するアイデアの詳細な説明

音楽を再生すると、曲が進むにつれて歌詞が徐々に色づきます。色は単語ごとに変わるのではなく、左から右へ...

フロントエンドの上級者向けコースでは、JavaScript のストレージ機能の使い方を学習します。

目次序文背景実施計画の考え方js ストレージ機能ソリューション設計やっと要約する序文どの SaaS ...

Mac で MySQL 8.0.22 のパスワードを取得する方法

Mac 最新バージョンの MySQL 8.0.22 パスワード回復問題の説明:昨日、突然、Macで最...

React の 3 つの主要属性における Ref の使用に関する詳細な説明

目次クラスコンポーネント機能コンポーネントインタビューのよくある質問: React における ref...

CSS の Display、Visibility、Opacity、rgba、z-index: -1 の違い

ウェブページ上のいくつかの要素の非表示、透明、その他のプロパティを制御する必要があることがよくありま...

MySQL ストアド プロシージャの原理と使用法の詳細な説明

この記事では、例を使用して、MySQL ストアド プロシージャの原理と使用方法を説明します。ご参考ま...

この記事では、Viteがブラウザのリクエストに対して何を行うかを説明します。

目次動作原理:ブラウザは何をするのですか?ホストファイル index.htmlメイン.jsその他のベ...

Docker を使用して nginx で tomcat クラスターを構築する方法 (画像とテキスト付き)

まず、Tomcatフォルダを作成します。Dockerの設定を容易にするために、ルートディレクトリに直...

ブラウザがクロージャをどのように認識するかについて詳しく説明します

目次序文クロージャの紹介メモリのゴミを識別する方法クロージャのメモリ表現結論序文クロージャは、Jav...

nginx を使用してカナリアリリースをシミュレートする方法

この記事では、ブルーグリーン デプロイメントと、nginx を使用してカナリア リリースを最も簡単な...

ZabbixはPSK共有キーを使用してサーバーとエージェント間の通信を暗号化します。

Zabbix バージョン 3.0 以降、Zabbix サーバー、Zabbix プロキシ、Zabbi...

IE5.0以降のHTCコンポーネントの定義の概要

Microsoft IE 5.0 がリリースされる前は、Web プログラミングにおける最大の課題は、...

1 つ以上のフィールドに基づいて重複データを検索する MySQL SQL ステートメント

SQLはテーブル内の重複レコードをすべて見つけます1. テーブルには id と name の 2 つ...

Vue 基本チュートリアル: 条件付きレンダリングとリストレンダリング

目次序文1.1 機能1.2 要素の可視性を制御する方法1.3 初期レンダリングの比較1.4 スイッチ...