序文パンくずナビゲーションは、閲覧したページを記録して、特定のページに素早く戻ることができます。この記事では、パンくずコンポーネントを自分でカプセル化するいくつかの方法を紹介します。実装方法を見てみましょう〜 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})
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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: Ubuntu 20.04 デスクトップのインストールとルート権限の有効化および SSH インストールの詳細
1. 概要ユーザーは、アクセスする Web アプリケーションがインタラクティブでスムーズに実行される...
序文データベースは常に私の弱点でした。自分の経験 (python+sqlalchemy) を組み合わ...
このチュートリアルでは、インストールに最新の MySQL コミュニティ グリーン バージョンである ...
1. ソースコードの設計コードをコピーコードは次のとおりです。 <!DOCTYPE html ...
表ラベルの構成HTML 内の表は <table> タグで構成されており、ブラウザはタグを...
概要: MYSQLの問題解決記録:どのようなインストール方法 (rpm、gz、gz.xz) を使用す...
序文Vue アプリケーションなどの静的ページを開発する場合、クロスドメインになる可能性のあるインター...
PHP7 がリリースされてからかなり時間が経ちますが、パフォーマンスが大幅に向上したことはよく知られ...
この記事の例では、ページ切り替え効果を実現するためのJSコードの具体的なコードを参考までに共有してい...
目次1. インターフェース効果のプレビュー2.uViewのインストール3.uViewの設定3.1 m...
目次1. 説明2. インストール3. テスト1. 説明Vue Router は、Vue.js の公式...
目次必要:機能ポイントレンダリング実装のアイデア具体的なコード(react\taro3.0)特定のコ...
目次1. DIVとSPANの違いと特徴2. スパンタグの概要3. 拡大と改善4. 凡例の効果の実証例...
1. インデックスの重要性インデックスは、列に特定の値を持つ行をすばやく見つけるために使用されます。...
目次導入始めるインストール①直接ダウンロードする方法②CND法③NPM方式④糸法NPMインストールの...