Vue.jsはコンポーネントを通じてアイコンを処理します

Vue.jsはコンポーネントを通じてアイコンを処理します

アイコン処理ソリューション

この記録の目的は、element-plus 以外のアイコンをコンポーネントにカプセル化する方法を記録することです。仕事でアイコンの問題に対処するのに役立つことを願っています。

分析の結果、要素プラス アイコンは el-icon を通じて表示できますが、カスタム アイコンの場合は、カスタム svg アイコンを表示するためにカスタム アイコン コンポーネントが必要であることがわかりました。

コンポーネントの機能

  • 外部 SVG アイコンを表示 (外部リンク)
  • プロジェクト内にSVGアイコンを表示する

アイコンコンポーネントのパッケージ化のアイデア

表示用アイコンコンポーネント

components/SvgIcon/index.vueを作成します:

<テンプレート>
    <div
        v-if="isExternal"
        :style="styleExternalIcon"
        クラス="svg-external-icon svg-icon"
        :class="クラス名"
    />
    <svg v-else class="svg-icon" :class="className" aria-hidden="true">
        <use :xlink:href="iconName" rel="external nofollow" />
    </svg>
</テンプレート>
​
<スクリプトの設定>
    '@/utils/validate' から { isExternal を external としてインポートします。
    'vue' から {defineProps, computed} をインポートします。
    const props = defineProps({
        //アイコン アイコン: {
            タイプ: 文字列、
            必須: true
        },
        // アイコンクラス名 className: {
            タイプ: 文字列、
            デフォルト: ''
        }
    })
    /**
     * 外部アイコンかどうかを判定する*/
    const isExternal = computed(() => external(props.icon))
    /**
     * 外部アイコンスタイル */
    const styleExternalIcon = computed(() => ({
        マスク: `url(${props.icon}) 繰り返しなし 50% 50%`,
        '-webkit-mask': `url(${props.icon}) 繰り返しなし 50% 50%`
    }))
    /**
     * プロジェクトアイコン */
    const iconName = computed(() => `#icon-${props.icon}`)
</スクリプト>
​
<style lang='scss' スコープ>
    .svgアイコン{
        幅: 1em;
        高さ: 1em;
        垂直位置合わせ: -0.15em;
        塗りつぶし: 現在の色;
        オーバーフロー: 非表示;
    }
​
    .svg-外部アイコン {
        背景色: 現在の色;
        マスクサイズ: カバー !important;
        表示: インラインブロック;
    }
</スタイル>
​

リソースが外部リソースであるかどうかを判断する

utils/validate.jsを作成します:

/**
 * 外部リソースであるかどうかを判断する*/
エクスポート関数isExternal(path) {
  /^(https?:|mailto:|tel:)/.test(パス) を返します。
}

外部SVGアイコン表示

コンポーネント svg-icon を導入することで、icon はアイコンの外部リンクを渡します。

<span class="svg-container">
    <svg-icon icon="https://xxx.svg"></svg-icon>
</span>

プロジェクト内のSVGアイコンの処理

  • プロジェクトのsrcディレクトリにアイコンフォルダを作成し、svgアイコンファイルをインポートします。
  • iconsの下にindex.jsファイルを作成する

ファイルは2つのことを行う

  • すべてのSVGアイコンをインポート
  • SvgIconのグローバル登録を完了する

index.jsコードは以下のとおりです

リファレンスドキュメント 依存関係管理 | webpack 中国語ドキュメント

'@/components/SvgIcon' から SvgIcon をインポートします。
​
// require.context() 関数を使用して独自のコンテキストを作成します
const svgRequire = require.context('./svg', false, /\.svg$/)
// この時点で、require インポートのリクエスト パラメータを受け入れることができる require 関数が返されます。
// この関数は 3 つのプロパティを提供し、require.keys() を通じてすべての svg アイコンを取得できます // アイコンをトラバースし、アイコンを require import 関数へのリクエストとして渡して、ローカル svg アイコンのインポートを完了します svgRequire.keys().forEach(svgIcon => svgRequire(svgIcon))
​
デフォルトアプリをエクスポート => {
 app.component('svg-icon', SvgIcon)
}

グローバルに登録されたプロジェクトアイコン

このファイルをmain.jsにインポートします

...
// svgIcon をインポート
'@/icons' から installIcons をインポートします
...
アイコンをインストール(アプリ)
...

内部アイコンを使用する

// ユーザー名 <svg-icon icon="user" />
// パスワード<svg-icon icon="password" />

svg-sprite-loaderを使用して svg アイコンを処理する

svg-sprite-loader svgアイコンの処理に特化したwebpackloaderです。

インストール: npm i --save-dev [email protected]

vue.config.jsファイルでloaderを構成する

定数パス = require('path')
関数resolve(dir) {
 path.join(__dirname, dir) を返します
}
​
モジュール.エクスポート = {
 チェーンWebpack(config) {
   // svg-sprite-loader をセットアップする
   構成モジュール
     .rule('svg')
     .exclude.add('src/icons' を解決します)
     。終わり()
   構成モジュール
     .rule('アイコン')
     .test(/\.svg$/)
     .include.add('src/icons' を解決します)
     。終わり()
     .use('svg-sprite-loader')
     .loader('svg-sprite-loader')
     .オプション({
       シンボルID: 'icon-[名前]'
     })
     。終わり()
 }
}

これは内部の svg アイコンを処理します。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue3でアイコンを使用する2つの例
  • Vueでアイコンをカスタマイズする手順
  • Vue要素プロジェクトにアイコンアイコンを導入する方法
  • Vueでカスタムアイコンを使用する方法
  • Vueプロジェクトにアイコンを導入する方法

<<:  HTML マーキータグの使用例

>>:  Docker Compose のインストールと使用手順

推薦する

HTML テーブル マークアップ チュートリアル (29): セルのライト境界線の色属性 BORDERCOLORLIGHT

セルでは、明るい境界線の色を個別に定義できます。 > 基本構文<TD ボーダーカラーライ...

純粋なCSSを使用してスイッチ効果を実現する

まずアイデアはこの効果を実現するには、 <input type="checkbox&...

Photoshop を使って Web ワイヤーフレームを作成する方法

この投稿では、通知、画像とビデオ、フォーム フィールド、タイトル、段落、箇条書きリスト、ナビゲーショ...

nginx のバージョン番号と WEB サーバー情報を隠すための解決策

Nginxはバージョン情報を隠すだけでなく、カスタムWebサーバー情報もサポートします。まずは最終的...

React は antd のアップロード コンポーネントを使用してファイル フォーム送信機能を実装します (完全なコード)

私はプロジェクトを実行するために react を使い始めたばかりで、非常に未熟で完全な初心者です。私...

Javascript クロージャの使用シナリオの原則の詳細

目次1. 終了2. クロージャの使用シナリオ1.タイムアウトを設定する2. コールバック3. 手ぶれ...

TypescriptとAxiosに基づくインターフェースリクエスト管理の詳細な説明

目次アイデア傍受を要求するレスポンスインターセプションhttpClient.tsを使用してリクエスト...

Vueでクラススタイルを使用する方法の詳細

目次1. ブール2. 表現3. マルチクラスパッケージ4. v-bind でクラス class を直...

標準のMySQL (x64) Windowsバージョンのインストール手順の詳細な説明

MySQL x64 はインストーラーを提供していません、インストーラーを提供していません、インストー...

webpackの遅延読み込みとプリロードの詳細な説明

目次通常の読み込み遅延読み込みプリロードプリロードを使用しないプリロードの使用要約する通常の読み込み...

未来志向の総合的なウェブデザイン:プログレッシブエンハンスメント

<br />原文: プログレッシブエンハンスメントを理解するアーロン・ガスタフソン翻訳:...

MySql における無効な Null セグメント判定と IFNULL() 失敗の解決策

MySql Nullフィールド判定とIFNULL失敗処理ps: (プロセスを表示したくない場合は、S...

Ubuntu 16.04 に Docker と nvidia-docker をインストールするための詳細なチュートリアル

目次DockerのインストールNvidia-docker のインストールDockerのインストール1...

Linux システムで PATH 環境変数を設定する方法 (3 つの方法)

1. Windows システムでは、JDK のインストールなど、多くのソフトウェアのインストールで...

ドラッグ位置プレビューを実装するネイティブJS

この記事では、要素をドラッグするときにプレビューを追加する小さなデモを紹介します。効果は次のとおりで...