実装のアイデア: ステップ 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
この記事は主に、PostgreSQL データベースを記述して解析を実装する SQL スクリプト関数を...
目次1. コンポーネントの紹介2. ソースコード分析2.1 テンプレート2.2 スクリプト2.3 実...
WeChatミニプログラムはますます人気が高まっています。多くの大学生が独学で学んでいるのも見てきま...
docker アタッチコマンドdocker attach [options] 容器実行中のコンテナに...
MySQL パフォーマンスの最適化MySQL はインターネット企業で広く使用されており、MySQL ...
3ウェイハンドシェイクフェーズクライアントSYNパケットの再試行回数sysctl -w net.ip...
前面に書かれた最近、ある読者から、ブラウザからサーバーにアクセスすると、画像の表示が遅く、ブラウザに...
目次1. はじめに2. JDBCはストリーミングクエリを実装する3. パフォーマンステスト3.1. ...
mysqlslap共通パラメータの説明–auto-generate-sql システムはテスト用のSQ...
最近、データベースについて学び始めました。最初にやったことは、データベースとは何か、データベースとデ...
1. ダウンロードダウンロードアドレス: https://dev.mysql.com/get/Dow...
参考までに、シンプルなナンバープレート入力コンポーネント(vue)です。具体的な内容は次のとおりです...
序文コンポーネントは、非常に頻繁に使用されるものです。多くの人は、コンポーネントを 1 つのファイル...
目次1.1. MySQL binlog を有効にする1.2. RabbitMQ の交換とキューを構成...
1. コマンド方式作成された Swarm クラスターで nginx サービスを実行し、--repli...