VUE を使用して Ali Iconfont ライブラリをオンラインで呼び出す方法

VUE を使用して Ali Iconfont ライブラリをオンラインで呼び出す方法

序文

何年も前、私はサーバー側の初心者でしたが、業界の競争が激しくなるにつれて、フロントエンドの初心者にならざるを得なくなりました。 。 。冗談です。テクノロジーを学ぶのが好きなだけです。この章では、Alibaba Iconfont Library を別のハイエンドな方法で開く方法を説明します。以前は、Web ページを美しくするために、インターネットでアイコン画像を見つけるために多くの労力を費やす必要がありました。しかし、テクノロジーの発展といくつかの大規模なプラットフォームの技術的貢献により、Alibaba は依然として素晴らしいと言わざるを得ません。これは、Alibaba を賞賛したり宣伝したりするものではありません。確かに、Alibaba はいくつかの分野で Tencent よりも優れています。それは分野に関係しているのかもしれません。私の個人的な認識レベルにより、そう思うしかありません。たとえば、JAVA サーバーの方向では、Alibaba には Nacos、Canal、RocketMQ、Dubbo、Sentinel などのオープンソース テクノロジがあります。話題に戻ります。タイトルが示すように、この章の内容はVUEフロントエンドとAli Iconfontアイコンライブラリを中心に展開されます。ウェブサイトからアイコンをつなぎ合わせる時代を経て、2015〜2016年頃にAli Iconfontアイコンライブラリを使い始めました。当初は、アイコンをダウンロードして使用する方法しか知りませんでした。

ここに画像の説明を挿入

これはダウンロードした画像ですが、なかなか笑えます。その後、フロントエンド技術の学習に伴い、uniapp を書いたときにアイコンファイルアプリケーションの使い方を学び始めました。

ここに画像の説明を挿入

アイコンを頻繁に変更する場合は、アイコンファイルを頻繁にダウンロードして再インポートする必要があり、面倒です。この章では、Ali Iconfontアイコンライブラリをオンラインで紹介し、動的にロードします。この方法では、アイコンアイコンやアイコンファイルをダウンロードする必要はありません。個人的に最も便利なのは、アイコンライブラリを動的に更新できることです。また、Ali Iconfont アイコン ライブラリ内のプロジェクト グループを削除しても、接続が生成されている限りプロジェクトで引き続き使用できますが、接続の回復時間がどれくらいかはわかりません。

アイコンフォントを使い始める

公式ウェブサイト

アイコンフォント

アイコンを選択

ここに画像の説明を挿入

プロジェクトに追加

ここに画像の説明を挿入

リンクを取得

ここに画像の説明を挿入

ここに画像の説明を挿入

ここまでで、Iconfontプラットフォーム関連の操作は完了です。次はVUEの便利な操作です。

オンライン通話テスト

index.htmlはリンクを導入します

ここに画像の説明を挿入

<link rel="スタイルシート" href="//at.alicdn.com/t/font_2872687_x5kgx7w5eth.css" rel="外部nofollow" >

インターフェースの使用

<i class="iconfont icon-3column"></i>

効果ビュー

ここに画像の説明を挿入

テストが完了しました!

VUEプロジェクト統合

ヘッドを追加するツールを書く

/**
 * 動的に CSS を挿入する
 */

エクスポートconst loadStyle = url => {
    定数リンク = document.createElement('link')
    リンクタイプ = 'text/css'
    link.rel = 'スタイルシート'
    link.href = URL
    定数 head = document.getElementsByTagName('head')[0]
    head.appendChild(リンク)
}

これは、ヘッドにリンクタグを追加するのに役立ちます。効果は次のとおりです。
ここに画像の説明を挿入

メイン構成<br /> インポートおよびロード リンク ツール

'./utils/util' から { loadStyle } をインポートします。

アイコンフォント接続を初期化する

iconfontVersion = ['2872417_3u9w2bdk2b'] とします。
const iconfontUrl = `//at.alicdn.com/t/font_$key.css`

ここで $key が使用される理由は、アイコン項目が複数ある場合に、iconfontVersion 配列に複数を追加できるためです。

代替の$key接続メソッドを記述し、リンク追加ツールメソッドを呼び出す

// Alibaba Cloud フォントライブラリを動的にロードする iconfontVersion.forEach(ele => {
  console.log(iconfontUrl.replace('$key', ele))
  loadStyle(iconfontUrl.replace('$key', ele))
})

完全なコード

ここに画像の説明を挿入

アイコンの使用

		 <i class="iconfont icon-3column"></i>
        <i class="iconfont icon-column-4"></i>

エフェクト表示

ここに画像の説明を挿入

ここでは、iタグにアイコンフォントを記述して最適化する必要があります。

アイコンフォントを最適化する
理論的には、iconfont icons を使用する場合、icon-3column と icon-column-4 の両方に icon- というプレフィックスが付けられ、css マッチングを使用して css オーバーレイを行うことができます。
common.scssファイルを記述します。コードは次のようになります。

// アイコンのCSS設定について [class^="icon-"] {
  フォントファミリ: "iconfont" !important;
  /* 以下の内容はサードパーティのアイコンライブラリ自体のルールを参照しています*/
  フォントサイズ: 18px !重要;
  フォントスタイル: 通常;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
}

.avue-input-icon__item i、.avue-crud__icon--small {
  フォントファミリ: "iconfont" !important;
  /* 以下の内容はサードパーティのアイコンライブラリ自体のルールを参照しています*/
  フォントサイズ: 24px !重要;
  フォントスタイル: 通常;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
}

.el-menu-item [class^=icon-] {
  右マージン: 5px;
  幅: 24px;
  テキスト配置: 中央;
  フォントサイズ: 18px;
  垂直位置合わせ: 中央;
}

.el-サブメニュー [class^=icon-] {
  垂直位置合わせ: 中央;
  右マージン: 5px;
  幅: 24px;
  テキスト配置: 中央;
  フォントサイズ: 18px;
}

グローバルリファレンス
メインファイルに書き込む

'./styles/common.scss' をインポートします

効果ビュー

ここに画像の説明を挿入

終わり

VUE が Ali Iconfont アイコン ライブラリをオンラインで呼び出すことに関するこの記事はこれで終わりです。VUE が Ali Iconfont アイコン ライブラリを呼び出すことに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Flutterルーティングの設定と使用方法を紹介する具体的な方法
  • Flutter プロジェクトがアイコンフォントを導入 アリババアイコン

<<:  個人ブログシステムを構築するためのDockerの超シンプルな実装

>>:  Mysql テーブルコメントフィールド取得操作

推薦する

HTML の順序付きリスト、順序なしリスト、定義リストに関する簡単な説明

順序付きリストXML/HTML コードコンテンツをクリップボードにコピー<オルタイプ= &qu...

Ubuntu 19.04 インストール チュートリアル (画像とテキストの手順)

1. 準備1.1 VMware 15 をダウンロードしてインストールするダウンロード リンク: h...

VMware14 に CentOS 7 をインストールするグラフィック チュートリアル

CentOS の紹介CentOS は、Red Hat Linux が提供する無料で利用できるソースコ...

Vue.js のミックスインの詳細な説明

ミックスインは、コンポーネントに分散された再利用可能な機能を柔軟な方法で提供します。 Mixin オ...

サーバー間のファイル バックアップ ソリューション、サーバー ファイルを別のサーバーに自動的にバックアップする方法は?

多くの組織ではファイル サーバーをバックアップする必要があり、あるサーバーから別のファイル サーバー...

Vueはタブ切り替えを実装します

この記事では、タブ切り替えを実装するためのVueの具体的なコードを例として紹介します。具体的な内容は...

ルート変更を監視するJavaScriptの詳細な説明

目次歴史pushState() メソッドpushState() の使用シナリオreplaceStat...

Angularフレームワークのビュー抽象定義の詳細な説明

序文「大規模なフロントエンド プロジェクト向け」に設計されたフロントエンド フレームワークである A...

Nginx rtmp モジュールのコンパイル ARM バージョンの問題

目次1. 準備: 2. ソースコードのコンパイル1. 設定する2. コンパイルエラー3. ターゲット...

大規模な Vue.js プロジェクトの構築と維持のための 10 のベスト プラクティス

目次1. スロットを使用してコンポーネントを理解しやすくし、より強力にする2. Vuexストアを正し...

CSS3のwebkit-box-reflectを巧みに使用して、さまざまな動的効果を実現します。

かなり前の記事で、 -webkit-box-reflectプロパティについて説明しました。リフレクシ...

Vue 名前付きスロットの基本的な使用例

序文名前付きスロットは、スロット内の「name」属性を使用して要素にバインドされます。知らせ: 1....

JSは5つ星の賞賛効果を達成

JS を使用してオブジェクト指向メソッドを実装し、JD.com の 5 つ星レビュー効果を実現します...

LeetCode の SQL 実装 (182. 重複するメールボックス)

[LeetCode] 182.重複メールPerson という名前のテーブル内のすべての重複メールを...

mysql 一時テーブルの使用状況の分析 [クエリ結果は一時テーブルに保存できます]

この記事では、例を使用して MySQL 一時テーブルの使用方法を説明します。ご参考までに、詳細は以下...