みなさん、こんにちは。私は Pai Daxing です。最近、バックグラウンド管理プラットフォームを手動で構築し、「Radar-Solution」という名前を付けました。開発プロセス中に、形成されている他のバックグラウンド ソリューションを比較し、それらがすべて存在することがわかりました。共通点の 1 つは、Layoutサイトの先頭にパンくずリストがあるのですが、それは真面目すぎる気がするのと、切り替え時のアニメーション効果がないので、遊び半分でアニメーション付きのパンくずリストを作ってみようと思いました。
動的ブレッドクラム
ブレッドクラムコンポーネント
ブレッドクラムコンポーネントとは:
ユーザー インターフェイスのナビゲーション補助です。これは、ユーザーがプログラムまたはファイル内で自分の位置を見つけて移動する方法です。
一般的なブレッドクラム ナビゲーション コンポーネントは、次の 2 つのカテゴリに分類されます。
- 静的なブレッドクラム
- 動的ブレッドクラム
まず、これら 2 つのブレッドクラム コンポーネントがどのように実装されるか、またその利点と欠点について理解しましょう。
静的なブレッドクラム
各ページに記載されている対応するブレッドクラム ナビゲーション メニューを参照します。
アドバンテージ：
- ロジックはシンプルで、1 つを記述した後、他のものを直接貼り付けてコピーできます。
欠点:
- すべてのページを再度書き直す必要がある
- ページのパス構造が変更されたため、手動で変更する必要があります
- 維持と拡張が難しい
動的ブレッドクラム
現在の状態に基づいて
urlパンくずメニューを自動的に生成します。
アドバンテージ：
- 動的ブレッドクラムは、パスに何が起こっても正しく計算されます。
欠点:
- 静的ブレッドクラムのロジックよりも少し複雑です。
次に、動的ブレッドクラムを使用してこの要件を完了します。コーディングの開始時に、実装プロセス中に明確なロジックが保証されないように、最初に要件を分析し、実装ステップを分割します。
- 基本的なブレッドクラムコンポーネントを作成する
- ルーティングデータを取得する
- データに基づいて動的なブレッドクラムをレンダリングします
ps: 以下に表示されるコードは次のように使用されます。
ElementUI
1. 基本的なブレッドクラムコンポーネントを作成する
レンダリング効果は次のとおりです:
次に、静的ブレッドクラムの最初のステップが完了し、次にこの静的コンポーネントに進む必要があります。上記のコードから、このコンポーネントには主に 2 つのコンポーネント部分が含まれていることを見つけるのは難しくありません。
el-breadcrumb：ラッピング性のある容器el-breadcrumb-item: 別のナビゲーション項目
動的エフェクトを完成させたい場合は、動的データに基づいてループをたどるだけでよくel-breadcrumb-item、データが取得された場合にデータを考慮するだけで済みます。
2. ルーティングデータを取得する
ルーティングデータの取得は、ルーティングを監視してデータを取得するだけです. ここでは、データを取得するためのVue具体的な方法を示します.vue.$route.matched指定されたルーティングアドレスに一致するデータを取得するだけです. よく知らない友人,こちらから直接お送りしますので、ここでは実装方法のみを紹介します。
ルートの変更をリッスンすると、特定のルートのアドレスを取得できます
データに基づいて動的なブレッドクラムをレンダリングします
データが取得できたので、皆さんが何をすべきかは私が言う必要はありません。パンくずリストが注目していない場合の操作です。el-breadcrumb-itemレンダリングv-for効果
は次のとおりです。
4.アニメーション効果を実現する
基本的なブレッドクラム ナビゲーション バーは完成しましたが、アニメーション効果がないため、タスクはまだ完了していません。引き続き既存のブレッドクラムにアニメーション効果を追加します。実際、Vue にはアニメーションを追加するメソッドも用意されています。transitionアニメーションを追加する必要がある部分をラップします。ここでは概念を紹介しません。まだ理解していない場合は、そこに送ります。次に、 を使用してパンくずリストをラップするだけですtransition。
次に、特定のアニメーション スタイルを追加すれば完了です。
これで完了です。最終的なレンダリング効果を見てみましょう。
最終的に当初の理想的な結果が得られました。私にとって、このケースはVueコマンド操作の一部を統合しただけでなく、より多くの思考と思考のプロセスを可能にしました。
終了
ここで紹介するのはブレッドクラムに関するほんの一部のケースです。すべてのコードは GitHub から取得できます。プロジェクトはまだ開発中です...
GitHub アドレス: https://github.com/pdxjie/vue-admin-radar