ナビゲーションバーコンポーネントをVueでカプセル化する

ナビゲーションバーコンポーネントをVueでカプセル化する

はじめに:ナビゲーション バーなどのコンポーネント ベースのアイデアを使用して機能モジュールを完全にカプセル化すると、開発アイデアと効率の両方に多くの利点があります。開発では、コンポーネント ベースの開発アイデアを可能な限り使用し、すべてのコードを同じ .vue ファイルに記述しないようにする必要があります。これにより、コードの可読性が大幅に向上します。

ナビゲーションバーのカプセル化

主なアイデアは、赤い部分をコンポーネントとして扱うことです。赤い部分は画像とテキストが異なるだけなので、同じコンポーネントにカプセル化し、画像情報とテキスト情報をコンポーネントに渡します (スロットを使用できます)。

//タブバーアイテム.vue
<テンプレート>
  <div class="tabBarItem" @click="tabBarItemClick">
    <div v-if="!isActive">
      <スロット名="アイテムアイコン"></スロット>
    </div>
    <div v-else>
      <スロット名="アイテムアイコンアクティブ"></スロット>
    </div>
    <div:style="isActiveColor"> は、
      <スロット名="アイテムテキスト"></スロット>
    </div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前:"タブバーアイテム",
  小道具:{
    パス:文字列、
    アクティブカラー:{
      タイプ:文字列、
      デフォルト:"ピンク"
    }
  },
  計算:{
    アクティブ:{
      得る(){
        this.$route.path.indexOf(this.path)!=​​=-1 を返します。
      },
      セット(){}
    },
    isActiveColor(){
      this.isActive?{color:this.activeColor}:{} を返します。
    }
  },
  方法:{
    タブバーアイテムクリック(){
      this.$router.push(this.path);
    }
  }
}
</スクリプト>

<スタイルスコープ>
.tabBarItem{
  フレックス: 1;
  フォントサイズ: 12px;
}
.tabBarItem画像{
  上マージン: 3px;
  幅: 24px;
  パディング下部:3px;
}
</スタイル>

次のステップは、これら 4 つのオプションを同じ場所に配置するコンテナーをカプセル化することです。

//タブバー.vue
<テンプレート>
  <div class="tabBar">
    <スロット></スロット>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前:"タブバー"
}
</スクリプト>

<スタイルスコープ>
.タブバー{
  ディスプレイ: フレックス;
  高さ: 49px;
  位置: 固定;
  左: 0;
  右: 0;
  下部: 0;
  テキスト配置: 中央;
  ボックスの影: 0px -1px 1px rgba(100, 100, 100, .1);
  背景色: #f6f6f6;
}

</スタイル>

次のステップでは、これを使用して、それぞれの TabBarItem スロットに異なる画像とテキスト情報を書き込むことです。

//メインタブバー.vue
<テンプレート>
  <div class="mainTabBar">
    <タブバー>
      <タブバー項目パス="/home" activeColor="#ff8198">
        <img src="~assets/img/tabbar/home.svg" alt="" slot="item-icon">
        <img src="~assets/img/tabbar/home_active.svg" alt="" slot="item-icon-active">
        <div slot="item-text">ホーム</div>
      </タブバー項目>
      <タブバー項目パス="/カテゴリ" activeColor="#ff8198">
        <img src="~assets/img/tabbar/category.svg" alt="" slot="item-icon">
        <img src="~assets/img/tabbar/category_active.svg" alt="" slot="item-icon-active">
        <div slot="item-text">カテゴリー</div>
      </タブバー項目>
      <タブバーアイテムパス="/カート" activeColor="#ff8198">
        <img src="~assets/img/tabbar/shopcart.svg" alt="" slot="アイテムアイコン">
        <img src="~assets/img/tabbar/shopcart_active.svg" alt="" slot="item-icon-active">
        <div slot="item-text">ショッピングカート</div>
      </タブバー項目>
      <タブバー項目パス="/プロファイル" activeColor="#ff8198">
        <img src="~assets/img/tabbar/profile.svg" alt="" slot="item-icon">
        <img src="~assets/img/tabbar/profile_active.svg" alt="" slot="item-icon-active">
        <div slot="item-text">マイ</div>
      </タブバー項目>
    </タブバー>
  </div>
</テンプレート>

<スクリプト>
「components/common/tabbar/TabBar」からTabBarをインポートします。
「components/content/tabbar/TabBarItem」からTabBarItemをインポートします。
エクスポートデフォルト{
  名前:"メインタブバー",
  コンポーネント:{
    タブバー、
    タブバーアイテム
  }
}

</スクリプト>
<スタイル>

</スタイル>

ナビゲーションバーは一般的にホームページで使用されるため、このナビゲーションバーをApp.vueに配置します。

<テンプレート>
  <div id="アプリ">
    <メインタブバー></メインタブバー>
  </div>
</テンプレート>

<スクリプト>
「components/content/tabbar/MainTabBar」からMainTabBarをインポートします。
エクスポートデフォルト{
  名前: 'アプリ'、
  コンポーネント:{
    メインタブバー
  }
}

まとめ:ナビゲーション バーを書くのに 3 つのファイルを使用するようです。面倒に思えるかもしれませんが、コードの可読性が大幅に向上します。プロジェクトの他の場所でナビゲーション バーを使用する必要がある場合は、MainTabBar に似たファイルを作成し、必要な画像とテキストをその中に書き込むだけです。他のプロジェクトで使用する場合でも、ファイルを直接コピーして直接使用できます。CSS スタイルを記述する必要さえないため、開発効率が大幅に向上します。

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

以下もご興味があるかもしれません:
  • 5 分で vue-cli3 を使用してプロジェクトを作成する方法を説明します (初心者向けガイド)
  • Vueプロジェクトでlessを使用するためのヒント
  • Vue プロジェクトで TypeScript クラスを適用する方法
  • Vue.jsでタブ切り替えと色変更操作を実装する解説
  • Vuex全体のケースの詳細な説明
  • Vueのトグルボタンをクリックしてボタンを有効にし、無効にします。
  • Vueコンポーネント通信方法事例まとめ
  • Vue.js スロットにおけるスコープ付きスロットの使用法の詳細な説明
  • Vue コードの読みやすさに関するいくつかの提案

<<:  MySQL ルートパスワードエラー番号 1045 の解決方法

>>:  Dockerコンテナのホスト間マルチネットワークセグメント通信ソリューションの詳細説明

推薦する

nginxアクセス制御の実装例

高性能で軽量なウェブサービスソフトウェアであるNginxについて高い安定性 システムリソースの消費量...

CSS3 変換遷移ジッター問題の解決

transform: scale(); スケーリングするとIEブラウザでジッターが発生します変換スケ...

webpackのモバイル適応ソリューションの概要

目次レムフォルクスワーゲンサードパーティのUIフレームワークに適応する結論モバイル開発における最も一...

MySqlデータベースをバックアップするいくつかの方法

mysqldump ツールのバックアップデータベース全体をバックアップする $> mysqld...

Ubuntu に MySQL 5.7 をインストールし、データ ストレージ パスを構成する方法

1. MySQLをインストールするこの記事はAPT経由でインストールされており、インストールされてい...

jsは徐々に増加するデジタルアニメーションを実現します

目次背景コンテナを固定し、数字を上にスクロールすることで、スクロールホイールと同様の効果を実現します...

CSS で写真のスタッキング効果を実装するサンプルコード

成果を達成するステップ1. 初期index.html最初の写真、一番上の写真を作成します。写真の i...

この記事では、MySQLのマスタースレーブ同期の原理を説明します。

目次MySQL マスタースレーブ同期原理の簡単な分析1. マスタースレーブとは何ですか? 2. 主従...

CSSアニメーションによるテーブルスクロールカルーセル効果の実装

前回の CSS 回転灯と同じ内容の CSS アニメーションの応用です。これは単なる別のアプリケーショ...

シンプルで簡単なJavaScript開発のためのSvelte実装原理の詳細な説明

目次デモ1フラグメントの作成スヴェルトコンポーネント状態を変更できるデモSvelte は長い間存在し...

js での Object.create インスタンスの使用法の詳細な説明

1. Object.create() メソッドを使用して新しいオブジェクトを作成し、既存のオブジェク...

MySQL CHARとVARCHARの保存と読み取りの違い

導入保存時と読み取り時に CHAR 型と VARCHAR 型の違いを本当にご存知ですか?まずいくつか...

Vueシャトルボックスは上下の動きを実現します

この記事の例では、vueシャトルボックスを上下に動かすための具体的なコードを参考までに共有しています...

MySQL の垂直テーブルを水平テーブルに変換する方法と最適化のチュートリアル

1. 縦型テーブルと横型テーブル垂直テーブル: テーブル内のフィールドとフィールド値はキーと値の形式...

Ubuntu 基本チュートリアル: apt-get コマンド

序文apt-get コマンドは、Ubuntu システムのパッケージ管理ツールです。パッケージのインス...