序文何年も前、私はサーバー側の初心者でしたが、業界の競争が激しくなるにつれて、フロントエンドの初心者にならざるを得なくなりました。 。 。冗談です。テクノロジーを学ぶのが好きなだけです。この章では、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タグにアイコンフォントを記述して最適化する必要があります。 アイコンフォントを最適化する // アイコンの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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 個人ブログシステムを構築するためのDockerの超シンプルな実装
順序付きリストXML/HTML コードコンテンツをクリップボードにコピー<オルタイプ= &qu...
1. 準備1.1 VMware 15 をダウンロードしてインストールするダウンロード リンク: h...
CentOS の紹介CentOS は、Red Hat Linux が提供する無料で利用できるソースコ...
ミックスインは、コンポーネントに分散された再利用可能な機能を柔軟な方法で提供します。 Mixin オ...
多くの組織ではファイル サーバーをバックアップする必要があり、あるサーバーから別のファイル サーバー...
この記事では、タブ切り替えを実装するためのVueの具体的なコードを例として紹介します。具体的な内容は...
目次歴史pushState() メソッドpushState() の使用シナリオreplaceStat...
序文「大規模なフロントエンド プロジェクト向け」に設計されたフロントエンド フレームワークである A...
目次1. 準備: 2. ソースコードのコンパイル1. 設定する2. コンパイルエラー3. ターゲット...
目次1. スロットを使用してコンポーネントを理解しやすくし、より強力にする2. Vuexストアを正し...
かなり前の記事で、 -webkit-box-reflectプロパティについて説明しました。リフレクシ...
序文名前付きスロットは、スロット内の「name」属性を使用して要素にバインドされます。知らせ: 1....
JS を使用してオブジェクト指向メソッドを実装し、JD.com の 5 つ星レビュー効果を実現します...
[LeetCode] 182.重複メールPerson という名前のテーブル内のすべての重複メールを...
この記事では、例を使用して MySQL 一時テーブルの使用方法を説明します。ご参考までに、詳細は以下...