0 アイコンと画像の違いアイコンは文字であり、画像はバイナリ ストリームです。つまり、画像はアイコンよりも読み込みが遅いため、アイコンを読み込むために img タグを使用しないことが最善です。import メソッドを使用してアイコンをコンポーネントとしてインポートし、タグとしてインポートすることができます。 1 svgをインストールする1. 管理者として cmd ウィンドウを実行し、実行するプロジェクト ディレクトリに切り替えます。 npm に svg を追加 2 アイコンライブラリからアイコンをダウンロードする1. Alibabaアイコンライブラリ
2. svgをダウンロードする 3. compone ディレクトリの下に icons ディレクトリを作成し、特にアイコンを保存するために icons の下に svg ディレクトリを作成します。 3 プラグインの使い方を確認する
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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: JDBC を使用して Mysql データベースに接続する際に発生する可能性のある問題の概要
>>: Linux サーバーに Java Web プロジェクトをデプロイするための完全なチュートリアル
目次単項演算子ブール演算子乗算演算子加法演算子関係演算子等価演算子条件演算子代入演算子カンマ演算子要...
音楽を再生すると、曲が進むにつれて歌詞が徐々に色づきます。色は単語ごとに変わるのではなく、左から右へ...
目次序文背景実施計画の考え方js ストレージ機能ソリューション設計やっと要約する序文どの SaaS ...
Mac 最新バージョンの MySQL 8.0.22 パスワード回復問題の説明:昨日、突然、Macで最...
目次クラスコンポーネント機能コンポーネントインタビューのよくある質問: React における ref...
ウェブページ上のいくつかの要素の非表示、透明、その他のプロパティを制御する必要があることがよくありま...
この記事では、例を使用して、MySQL ストアド プロシージャの原理と使用方法を説明します。ご参考ま...
目次動作原理:ブラウザは何をするのですか?ホストファイル index.htmlメイン.jsその他のベ...
まず、Tomcatフォルダを作成します。Dockerの設定を容易にするために、ルートディレクトリに直...
目次序文クロージャの紹介メモリのゴミを識別する方法クロージャのメモリ表現結論序文クロージャは、Jav...
この記事では、ブルーグリーン デプロイメントと、nginx を使用してカナリア リリースを最も簡単な...
Zabbix バージョン 3.0 以降、Zabbix サーバー、Zabbix プロキシ、Zabbi...
Microsoft IE 5.0 がリリースされる前は、Web プログラミングにおける最大の課題は、...
SQLはテーブル内の重複レコードをすべて見つけます1. テーブルには id と name の 2 つ...
目次序文1.1 機能1.2 要素の可視性を制御する方法1.3 初期レンダリングの比較1.4 スイッチ...