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 を応援していただければ幸いです。

以下もご興味があるかもしれません: