Vue3 でパンくず関数コンポーネントをカプセル化するいくつかの方法

Vue3 でパンくず関数コンポーネントをカプセル化するいくつかの方法

序文

パンくずナビゲーションは、閲覧したページを記録して、特定のページに素早く戻ることができます。この記事では、パンくずコンポーネントを自分でカプセル化するいくつかの方法を紹介します。実装方法を見てみましょう〜

1. パンくずリストはなぜ必要なのでしょうか?

パンくずナビゲーションの概念は、童話「ヘンゼルとグレーテル」に由来しています。ヘンゼルとグレーテルは森の中を歩いているときに偶然道に迷ってしまいましたが、道中に散らばっているパンくずを見つけて、家への道を見つけることができました。

上記の紹介を読んだ後、パンくずコンポーネントの使用シナリオを理解していただけたと思います。はい、その通りです。どのページをクリックしたかを記録し、前のページに戻れるようにするために使用されます。

Web ページが複数回ジャンプすると、ユーザーはすでに混乱している可能性があります。プログラマーとしては、アドレス バーのパラメータを通じて現在どこにいるかを知ることができるかもしれません。結局のところ、Web ページはユーザーに表示されるものです。ユーザーがパンくずナビゲーションのない Web ページを使用すると、パンくずナビゲーションに抵抗を感じる可能性があります。パンくずナビゲーションを使用して各ページ ジャンプを記録すると、この問題をうまく解決できます。

2. 一次包装

1. 実装のアイデア

ページ構造とスタイルを準備し、フォントアイコンが必要です

CDNからフォントアイコンリソースをパブリックディレクトリのindex.htmlにインポートします。

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

外部から渡す必要がある値をカスタム属性として定義します

タグの外部に書き込まれたコンテンツをデフォルトのスロットに配置する

2. コードデモンストレーション

src/components ディレクトリに新しい bread-crumbs.vue ファイルを作成します。共通コンポーネントはこのディレクトリに配置されて一元管理され、ファイル名はカスタマイズできます。

コードは次のとおりです(例):

<テンプレート>
  <div class='パンくず'>
    <div class="bread-crumbs-item">
      <RouterLink to="/">ホーム</RouterLink>
    </div>
    <i class="iconfont icon-angle-right"></i>

    <div v-if="親名" class="パンくずリスト項目">
      <ルーターリンク v-if="親パス" :to="親パス">{{親名}}</ルーターリンク>
      <span v-else>{{親名}}</span>
    </div>

    <i v-if="親名" class="iconfont icon-angle-right"></i>

    <div class="bread-crumbs-item">
      <span>
          <スロット/>
      </span>
    </div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'BreadCrumbs'、
  小道具: {
    親名: {
      タイプ: 文字列、
      デフォルト: ''
    },
    親パス: {
      タイプ: 文字列、
      デフォルト: ''
    }
  }
}
</スクリプト>

<スタイル スコープ lang='less'>
.パンくず{
  ディスプレイ: フレックス;
  パディング: 25px 10px;
  &-アイテム {
    {
      テキスト装飾: なし;
      色: #666;
      遷移: すべて .4;
      &:ホバー{
        色: #27ba9b;
      }
    }
  }
  私 {
    フォントサイズ: 12px;
    フォントスタイル: 通常;
    左マージン: 5px;
    右マージン: 5px;
    行の高さ: 22px;
  }
}
</スタイル>

src/componentsディレクトリに新しいindex.jsファイルを作成し、カプセル化されたグローバルコンポーネントを登録します。

'./bread-crumbs' から BreadCrumbs をインポートします。

エクスポートデフォルト{
  インストール(アプリ){
    app.component(BreadCrumbs.name、BreadCrumbs) の順にクリックします。
  }
}

main.jsにプラグインとして登録する

'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
'./router' からルーターをインポートします
'./store' からストアをインポートします
// インポートして登録する import myUI from './components'

createApp(App).use(store).use(router).use(myUI).mount('#app')

3. 使用

パブリックコンポーネントに必要な値を渡す

コードは次のとおりです(例):

<テンプレート>
  <div class="home-banner">
    <bread-crumbs parentPath="/xxx" parentName="電化製品">エアコン</bread-crumbs>
  </div>
</テンプレート>

<スクリプト>

エクスポートデフォルト{
  名前: 'アプリ'、
  設定() {
  }
}
</スクリプト>

4. デメリット

基本的なニーズを満たすだけであり、ナビゲーションの第 2 レベルを超えて使用することはできません。

3. 高度なパッケージング

1. 実装のアイデア

elementUIパンくずコンポーネントコードを参照してください

<el-breadcrumb セパレーター="/">
  <el-breadcrumb-item :to="{ path: '/' }">ホーム</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/" rel="external nofollow" >アクティビティ管理</a></el-breadcrumb-item>
  <el-breadcrumb-item>アクティビティ リスト</el-breadcrumb-item>
  <el-breadcrumb-item>イベントの詳細</el-breadcrumb-item>
</el-breadcrumb>

各ナビゲーションをコンポーネントとしてカプセル化する

2. コードデモンストレーション

カプセル化の前のステップに基づいてコードの改善を継続する

コードは次のとおりです(例):

src/component ディレクトリに新しい bread-crumbs-item コンポーネントを作成します。ファイル名はカスタマイズできます。

<テンプレート>
  <div class="bread-crumbs-item">
    <RouterLink v-if="to" :to="to"><スロット /></RouterLink>
    <span v-else><スロット /></span>
    <i class="iconfont icon-angle-right"></i>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'BreadCurmbsItem',
  小道具: {
    に:
      タイプ: [文字列、オブジェクト]
    }
  }
}
</スクリプト>

または、src/componentsディレクトリのindex.jsにグローバルコンポーネントとして登録します。

'./bread-crumbs' から BreadCrumbs をインポートします。
'./bread-crumbs-item' から BreadCrumbsItem をインポートします。

エクスポートデフォルト{
  インストール(アプリ){
    app.component(BreadCrumbs.name、BreadCrumbs) の順にクリックします。
    app.component(BreadCrumbsItem .name, BreadCrumbsItem) の実装
  }
}

BreadCrumbs.vueのコードを変更して、各ナビゲーション項目をデフォルトのスロットに配置する

<テンプレート>
  <div class='パンくず'>
    <スロット />
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'BreadCrumbs'
}
</スクリプト>

<スタイル スコープ lang='less'>
.パンくず {
  ディスプレイ: フレックス;
  パディング: 25px 10px;
  :deep(&-item) {
    {
      テキスト装飾: なし;
      色: #666;
      遷移: すべて 0.4 秒;
      &:ホバー{
        色: #27ba9b;
      }
    }
  }
  :深い(i) {
    フォントスタイル: 通常;
    フォントサイズ: 12px;
    左マージン: 5px;
    右マージン: 5px;
    行の高さ: 22px;
  }
}
</スタイル>

3. 使用

使用する場合、セカンダリ ナビゲーションの数と同じ数の BreadCrumbsItem を使用します。

コードは次のとおりです(例):

<テンプレート>
  <div class="home-banner">
  	<!-- パンくずリスト -->
    <パンくず>
        <BreadCrumbsItem to="/">ホーム</BreadCrumbsItem>
        <BreadCrumbsItem to="/xxx">電化製品</BreadCrumbsItem>
        <BreadCrumbsItem >エアコン</BreadCrumbsItem>
    </パンくず>
  </div>
</テンプレート>

<スクリプト>

エクスポートデフォルト{
  名前: 'アプリ'、
  設定() {
  }
}
</スクリプト>

4. デメリット

最後のナビゲーションの後に、追加の > インジケーターが表示されます。

4. 高度なパッケージング

1. アイデア

究極版では、レンダリング機能を使用して自分でスプライシングを作成します。

要素を作成する

レンダリング レンダリング オプションと h 関数

コンポーネントによって表示されるコンテンツを指定します: new Vue({options})

  • elオプションはセレクターを通じてコン​​テナを見つけ、コンテナコンテンツはコンポーネントコンテンツです。
  • テンプレートオプション、<div>コンポーネントコンテンツ</div> をコンポーネントコンテンツとして
  • render オプションは、デフォルトで createElement 関数 (h) に渡される関数です。この関数は構造を作成するために使用され、その後 render 関数はレンダリングされたコンポーネント コンテンツを返します。優先度が高くなります。

2. コードデモンストレーション

BreadCurmbsItemコンポーネントのコードを変更する

<テンプレート>
  <div class="bread-crumbs-item">
    <RouterLink v-if="to" :to="to"><スロット /></RouterLink>
    <span v-else><スロット /></span>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'BreadCurmbsItem',
  小道具: {
    に:
      タイプ: [文字列、オブジェクト]
    }
  }
}
</スクリプト>

BreadCrumbs.vueのコードを修正する

コード例(以下):

<スクリプト>
'vue' から { h } をインポートします
エクスポートデフォルト{
  名前: 'BreadCrumbs'、
  与える () {
    // 使用方法 // 1. テンプレート タグ、単一ファイル コンポーネントを削除します // 2. 戻り値はコンポーネント コンテンツです // 3. vue2.0 の h 関数が渡され、vue3.0 の h 関数がインポートされます // 4. h の最初のパラメーターはタグ名、2 番目のパラメーターはタグ属性オブジェクト、3 番目のパラメーターは子ノードです // 要件 // 1. パンくずリストの親コンテナーを作成します // 2. デフォルトのスロット コンテンツを取得します // 3. レンダリング関数によって整理されるパンくずリスト項目コンポーネントの i タグを削除します // 4. スロット内の項目をトラバースし、動的に作成されたノードを取得します。最後の項目には i タグがありません // 5. パンくずリスト タグ内の動的に作成されたノードをレンダリングします const items = this.$slots.default()
    const 動的アイテム = []
    items.forEach((item, i) => {
      動的アイテム.push(アイテム)
      i < (items.length - 1) の場合
        dymanicItems.push(h('i', { クラス: 'iconfont icon-angle-right' }))
      }
    })
    h('div', { class: 'bread-crumbs' }, dymanicItems) を返します
  }
}
</スクリプト>

<スタイル lang='less'>
// スコープ属性を削除して、スタイルがアイテムコンポーネントに浸透できるようにします。bread-crumbs {
  ディスプレイ: フレックス;
  パディング: 25px 10px;
   &-アイテム {
    {
      テキスト装飾: なし;
      色: #666;
      遷移: すべて .4;
      &:ホバー{
        色: #27ba9b;
      }
    }
  }
  私 {
    フォントサイズ: 12px;
    左マージン: 5px;
    右マージン: 5px;
    行の高さ: 22px;
    // スタイルが適切ではありません // &:last-child {
    // 表示: なし;
    // }
  }
}
</スタイル>

3. 使用

このカプセル化方法により、グローバル コンポーネントの再利用性が高まるため、強くお勧めします。

<テンプレート>
  <div class="home-banner">
    <!-- パンくずリスト -->
    <パンくず>
        <BreadCrumbsItem to="/">ホーム</BreadCrumbsItem>
        <BreadCrumbsItem to="/xxx">電化製品</BreadCrumbsItem>
        <BreadCrumbsItem to="/xxx/xx">エアコン</BreadCrumbsItem>
        <BreadCrumbsItem >リモート コントロール</BreadCrumbsItem>
    </パンくず>
  </div>
</テンプレート>

<スクリプト>

エクスポートデフォルト{
  名前: 'アプリ'、
  設定() {
  }
}
</スクリプト>

このカプセル化の後、独自のカプセル化されたパンくずナビゲーションがすでにマルチレベルナビゲーションをサポートしていることがわかります。そして、最後のナビゲーション後の > インジケーターは消えます。

5. JSX最適化を使用する

高レベルの記述方法における機能コードは、jsx を使用して書き直すことができます。jsx で記述されたコードは、より簡潔で明確です。

エクスポートデフォルト{
  名前: 'BreadCrumbs'、
  与える () {
    // vue2 のレンダリング関数のパラメータは h 関数です // vue3 の h 関数がインポートされます // createElement (タグ名、タグ属性、タグサブ要素)
    // コンソール.dir(this.$slots.default())
    // XtxBread コンポーネントのすべてのスロットを取得し、コンポーネントインスタンスで埋めます。const items = this.$slots.default()
    定数結果 = []
    items.forEach((item, index) => {
      結果.push(アイテム)
      // i アイコンを手動で生成し、パンくずリスト項目の末尾に追加します if (index < items.length - 1) {
        results.push(<i className='iconfont icon-angle-right'></i>)
      }
    })

    <div className='bread-crumbs'>{results}</div> を返します。
  }
}

要約する

機能は小さいですが、多くの知識ポイントをカバーしています。上記のコードはローカルでテストされています。

これで、vue3 の自己カプセル化パンくず機能コンポーネントに関するこの記事は終了です。vue3 の自己カプセル化パンくず機能コンポーネントに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueパンくずコンポーネントのカプセル化方法
  • Vue カプセル化パンくずリスト コンポーネント チュートリアル
  • vue+element-ui テーブルカプセル化タグラベルスロットの使用
  • Vueトップタグ閲覧履歴の実装
  • キャッシュナビゲーションプロセスを作成するための実用的なvueタグ
  • Vue の基本パンくずリストとタグの詳細な説明

<<:  MySQL データ型 DECIMAL の詳細な分析

>>:  Ubuntu 20.04 デスクトップのインストールとルート権限の有効化および SSH インストールの詳細

推薦する

Chrome デベロッパー ツールの詳細な紹介 - タイムライン

1. 概要ユーザーは、アクセスする Web アプリケーションがインタラクティブでスムーズに実行される...

MySQLをシンプルに学ぶ

序文データベースは常に私の弱点でした。自分の経験 (python+sqlalchemy) を組み合わ...

MySQL 8.0.11 Community Green Edition の Windows 用インストール手順図

このチュートリアルでは、インストールに最新の MySQL コミュニティ グリーン バージョンである ...

フォーム送信ページの更新がジャンプしない

1. ソースコードの設計コードをコピーコードは次のとおりです。 <!DOCTYPE html ...

HTMLのテーブルタグの基本学習チュートリアル

表ラベルの構成HTML 内の表は <table> タグで構成されており、ブラウザはタグを...

MySQL 8.0.18 のさまざまなバージョンのインストールとインストール中に発生した問題 (要点の要約)

概要: MYSQLの問題解決記録:どのようなインストール方法 (rpm、gz、gz.xz) を使用す...

Nginx を使用してフロントエンドのクロスドメイン問題を解決する方法

序文Vue アプリケーションなどの静的ページを開発する場合、クロスドメインになる可能性のあるインター...

Dockerを使用してサーバー上で複数のPHPバージョンを実行する

PHP7 がリリースされてからかなり時間が経ちますが、パフォーマンスが大幅に向上したことはよく知られ...

ページ切り替え効果を実現するJSコード

この記事の例では、ページ切り替え効果を実現するためのJSコードの具体的なコードを参考までに共有してい...

WeChatアプレットがSMSログインを実装

目次1. インターフェース効果のプレビュー2.uViewのインストール3.uViewの設定3.1 m...

Vue-routerルーティングの使い方

目次1. 説明2. インストール3. テスト1. 説明Vue Router は、Vue.js の公式...

WeChatアプレットは固定ヘッダーとリストテーブルコンポーネントを実装します

目次必要:機能ポイントレンダリング実装のアイデア具体的なコード(react\taro3.0)特定のコ...

divとspanの違いと使い方

目次1. DIVとSPANの違いと特徴2. スパンタグの概要3. 拡大と改善4. 凡例の効果の実証例...

MySQLインデックスを追加する3つの原則を簡単に理解する

1. インデックスの重要性インデックスは、列に特定の値を持つ行をすばやく見つけるために使用されます。...

Vuex のコアコンセプトと基本的な使用法の詳細な説明

目次導入始めるインストール①直接ダウンロードする方法②CND法③NPM方式④糸法NPMインストールの...