Vueパンくずコンポーネントのカプセル化方法

Vueはパンくずコンポーネントをカプセル化して参照します。具体的な内容は次のとおりです。

効果を達成するには

序文

多くの電子商取引製品では、ユーザーエクスペリエンスを最適化するためにパンくずナビゲーションを実装する必要があります。

1. 主要なブレッドクラムパッケージのコンポーネント

1. インフラストラクチャコンポーネントBread.vueをカプセル化する

<テンプレート>
  <div class='xtx-bread'>
    <div class="xtx-bread-item">
      <RouterLink to="/">ホーム</RouterLink>
    </div>
    <i class="iconfont icon-angle-right"></i>
    <div class="xtx-bread-item">
      <RouterLink to="/category/10000">セカンダリナビゲーション</RouterLink>
    </div>
    <i class="iconfont icon-angle-right"></i>
    <div class="xtx-bread-item">
      <span>第 3 レベルのナビゲーション</span>
    </div>
  </div>
</テンプレート>

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

2. parentPath parentNameプロパティ、デフォルトスロットを公開し、コンポーネントを動的にレンダリングするためのpropsを定義する

<div class='xtx-bread'>
     <div class="xtx-bread-item">
       <RouterLink to="/">ホーム</RouterLink>
     </div>
     <i class="iconfont icon-angle-right"></i>
    <テンプレート v-if="親名">
     <div class="xtx-bread-item" v-if="親名">
       <RouterLink v-if="parentPath" to="/category/10000">{{parentName}}</RouterLink>
       <span v-else>{{親名}}</span>
     </div>
    </テンプレート>
    <i v-if="親名" class="iconfont icon-angle-right"></i>
    <div class="xtx-bread-item">
      <span> <スロット/> </span>
    </div>
  </div>
// propsを使用してデータを受け取ります props: {
    親名: {
      タイプ: 文字列、
      デフォルト： ''
    },
    親パス: {
      タイプ: 文字列、
      デフォルト： ''
    }
  }

3. コンポーネントを登録し、検証効果を使用する

'./Bread' から Bread をインポートします
エクスポートデフォルト{
  インストール（アプリ）{
    // Vue2 では、パラメータは Vue コンストラクターです // Vue3 では、パラメータはルート コンポーネントのインスタンス オブジェクトです // グローバル コンポーネントを構成する app.component(Bread.name, Bread)
  }
}

4. コンポーネントを使用する

<Bread parentPath="/category/1005000" parentName="Apparel">フライングニットシリーズ</Bread>
<Bread parentName="Apparel">Flying Weave Series</Bread> //parentPath を削除した後はジャンプできません

2. 高度なパッケージングInfinitusナビゲーション

element-ui のパンくずコンポーネントを参照してください。

<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>

1. インフラストラクチャコンポーネントBrendItem.vueをカプセル化する

<テンプレート>
  <div class="xtx-bread-item">
    <RouterLink v-if="to" :to="to"><スロット /></RouterLink>
    <span v-else><スロット /></span>
    <i class="iconfont icon-angle-right"></i>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'XtxBreadItem',
  小道具: {
    に：
      type: [String, Object] //toの値は文字列またはオブジェクトのいずれかになります}
  }
}
</スクリプト>
//<bread-item to="/xxx/id"></bread-item> を使用する場合
<bread-item :to='{path:"/xxx/id"}'></bread-item>

2. Brend.vueをカプセル化する

<テンプレート>
  <div class='xtx-bread'>
    <スロット />
  </div>
</テンプレート>

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

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

3. 登録

'./BreadItem' から BreadItem をインポートします。
'./Bread' から Bread をインポートします
エクスポートデフォルト{
  インストール（アプリ）{
    // Vue2 では、パラメータは Vue コンストラクターです // Vue3 では、パラメータはルート コンポーネントのインスタンス オブジェクトです // グローバル コンポーネントを構成する app.component(Bread.name, Bread)
    app.component(BreadItem.name、BreadItem) の
  }
}

4. 使用

// パンくずリスト
    <BreadItem to="/">ホーム</XtxBreadItem>
    <BreadItem to="/category/1005000">衣類</XtxBreadItem>
    <BreadItem >フライングウィーブシリーズ</XtxBreadItem>
</XtxBread>

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

以下もご興味があるかもしれません: