Vue カプセル化 TabBar コンポーネントの完全なステップ記録

Vue カプセル化 TabBar コンポーネントの完全なステップ記録

実装のアイデア:

ステップ 1: TabBar と TabBarItem のコンポーネント カプセル化

この時点で、ページの基本的なレイアウトは実装されていますが、アイテムのクリックのアクティブ状態は実装されていないことがわかります。

ステップ2: アクティブな画像をTabBarItemに渡す

置き換えられたコンテンツがスロット全体を直接置き換えて、スロットに定義されたスタイルも置き換えられるのを防ぐには、スロットの外側にdivラッパーを定義するのが最適です。

ステップ3: TabBarItemとルーティングの組み合わせ

ステップ4: TabBarItemのカラーコントロール

基本的には完了していますが、ルート内のクリックパスを繰り返し実行するとエラーが発生することがわかりました

エラーの原因:

これは、vue-router ≥ 3.0 のコールバック形式が promise に変更されたためです。エラーがキャッチされない場合は、このようなエラー警告がコンソールに表示されます。

解決策1: vue-routerをバージョン3.0にダウングレードする

[email protected] を npm で実行します -S 

解決策2:

メソッドを呼び出すたびに catch を追加する必要がないように、ルーター プロトタイプ チェーンの push メソッドと replace メソッドを書き直します。

main.js に次の内容を記述します。

'vue-router' から Router をインポートします。
 
const originalPush = Router.prototype.push
Router.prototype.push = 関数push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  元のPush.call(this, location).catch(err => err) を返します
}

プッシュの変更がまだ有効にならない場合は、次の例のように、置換メソッドを試してください。

Router.prototype.replace をオーバーライドします。
Router.prototype.replace = 関数 replace(location) {
  originalReplace.call(this, location).catch(err => err) を返します。
};

フォントアイコンで実装

フォントアイコンの紹介

使用

要約する

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

以下もご興味があるかもしれません:
  • Vueはタブルーティング切り替えコンポーネントのメソッド例を実装します
  • Vue.js モバイルタブコンポーネントのカプセル化実践例
  • Vueコンポーネントタブバーの使い方の詳細な説明
  • Vueはコンポーネントルーティングジャンプメソッドを使用してタブバーコンポーネントをカプセル化します

<<:  HTML テーブル境界制御実装コード

>>:  4つの柔軟なScssコンパイル出力スタイル

推薦する

解析を実装するためにPostgreSQLデータベースを書き込むSQLスクリプト関数

この記事は主に、PostgreSQL データベースを記述して解析を実装する SQL スクリプト関数を...

Element PlusはAffixを実装します

目次1. コンポーネントの紹介2. ソースコード分析2.1 テンプレート2.2 スクリプト2.3 実...

WeChatアプレットが計算機機能を実装

WeChatミニプログラムはますます人気が高まっています。多くの大学生が独学で学んでいるのも見てきま...

Dockerコンテナアプリケーションログの表示方法

docker アタッチコマンドdocker attach [options] 容器実行中のコンテナに...

MySQL パフォーマンス最適化のヒント

MySQL パフォーマンスの最適化MySQL はインターネット企業で広く使用されており、MySQL ...

TCPパフォーマンスチューニングの実装原理とプロセス分析

3ウェイハンドシェイクフェーズクライアントSYNパケットの再試行回数sysctl -w net.ip...

nginx は画像表示の遅さとダウンロードの不完全さの問題を解決します

前面に書かれた最近、ある読者から、ブラウザからサーバーにアクセスすると、画像の表示が遅く、ブラウザに...

MySQL でストリーミングクエリを使用してデータ OOM を回避する

目次1. はじめに2. JDBCはストリーミングクエリを実装する3. パフォーマンステスト3.1. ...

Mysql の一般的なベンチマーク コマンドの概要

mysqlslap共通パラメータの説明–auto-generate-sql システムはテスト用のSQ...

MySQL 8.0.16 winx64 のインストールと設定方法のグラフィックチュートリアル

最近、データベースについて学び始めました。最初にやったことは、データベースとは何か、データベースとデ...

MySQL 5.7.31 64 ビット無料インストール版チュートリアル図

1. ダウンロードダウンロードアドレス: https://dev.mysql.com/get/Dow...

Vueナンバープレート入力コンポーネントの使い方の詳しい説明

参考までに、シンプルなナンバープレート入力コンポーネント(vue)です。具体的な内容は次のとおりです...

Vue でコンポーネントを一括インポート、登録、使用する方法

序文コンポーネントは、非常に頻繁に使用されるものです。多くの人は、コンポーネントを 1 つのファイル...

mysql-canal-rabbitmq のインストールと展開の非常に詳細なチュートリアル

目次1.1. MySQL binlog を有効にする1.2. RabbitMQ の交換とキューを構成...

Dockerの急速な拡張の高度な方法

1. コマンド方式作成された Swarm クラスターで nginx サービスを実行し、--repli...