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 テーブルコメントフィールド取得操作

推薦する

Linux sedコマンドの使用

1. 機能紹介sed (Stream EDitor) は、コンテンツを 1 行ずつ処理するストリーム...

シンプルなアコーディオン効果を実現するjs

この記事では、アコーディオン効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な...

MySQL インデックスの詳細な説明

目次1. インデックスの基本1.1 はじめに1.2 インデックスの仕組み1.3 インデックスの種類1...

JavaScript における継承の 3 つの方法

継承する1. 継承とは何か継承: まず、継承とは関係、つまりクラス間の関係です。JS にはクラスはあ...

IE8ブラウザはWebページ標準に完全互換となる

<br />海外メディアの報道によると、マイクロソフトはソフトウェアの相互運用性への取り...

MySQLリモート接続を有効にする方法

セキュリティ上の理由から、MySql-Server はローカル マシン (localhost、127...

Dockerプライベートウェアハウスレジストリの導入

使用される Docker イメージが増えるにつれて、イメージを保存する場所、つまりウェアハウスが必要...

Trash-Cli: Linux のコマンドラインごみ箱ツール

ゴミ箱は Linux ユーザー、Windows ユーザー、Mac ユーザーにとって非常に一般的なので...

vue フロントエンド HbuliderEslint リアルタイム検証 自動修復設定

目次HBuilderX での ESLint プラグインのインストールカスタム eslint-js ル...

CSSの使用に関する深い理解 clear:both

clear:both清除浮動これは私が常に持っていた印象ですが、私はこれをめったに使用せず、私の理...

カスタム Docker イメージを作成するための Dockerfile の詳細な説明と CMD と ENTRYPOINT 命令の比較

1. 概要Docker イメージを作成するには、次の 3 つの方法があります。 Docker コミッ...

PSを使用して2分でxhtml+cssウェブサイトのホームページを作成します

xhtml+css のウェブサイト再構築、ウェブ標準などについては、記事が多すぎるので繰り返しません...

IE6はmin-widthを実装している

まず第一に、この効果は古い話題であるはずだということはわかっています。今日ファイルを整理していたら、...

Day.js をベースにした JavaScript での日付処理のよりエレガントな方法

目次day.js を使用する理由モーメントデイ.js day.js がなければどうなるでしょうか? ...

QQブラウザ機能を実装するためのCSS

コード知識ポイント1. fullpage.jsを組み合わせてフルスクリーンスクロールを実現する2. ...