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 をよろしくお願いいたします。