ElementUI の this.$notify.close() 呼び出しが機能しない問題の解決方法

要件の説明

このプロジェクトでは、まずユーザーが質問を選択する必要があります。選択後、ElementUI の Notification コンポーネントを使用して、ファイル形式がチェック中であることをユーザーに通知します (最初にバックエンドに送信し、バックエンドでチェックしてから、結果をフロントエンドに返す必要があります)。フォーマット チェックが正しければ、通知が閉じられ、アップロードされたファイルは元に戻せないことをユーザーに通知するメッセージ ボックス (ElementUI のコンポーネント) がポップアップ表示されます。

問題の説明

ファイル形式が正しいかどうかを確認した後、通知を削除するには関連する関数を手動で呼び出す必要があります。公式ドキュメントによると、 this.$notify.close()を使用しても機能せず、コンソールにエラーは報告されませんでした。

問題分析

コンソールにthis.$notifyを出力した後、以下に示すように通知関連の関数を入力できます。

コードでは、id と userOnClose という 2 つのパラメータを必要とするclose()関数など、Notification 内にカプセル化されている関数を確認できます。コードから、id が Notification の ID であることがわかるのは難しくありません。たとえば、Notification が複数ある場合、それらを選択的に閉じることができます。userOnClose は、コールバック関数に少し似た関数を渡すことができます。したがって、 close()関数を使用する場合は、閉じる通知の ID を知っている必要があります。これについては、この記事の最後で簡単に説明します。
コードを見てみると、パラメータを必要とせず、トラバースによってすべての Notification を閉じるcloseAll()関数があることがわかります。これは、このプロジェクトのシナリオに適しています (閉じる必要がある Notification は 1 つだけです)。

問題解決

このプロジェクトでは、 this.$notify.closeAll()を呼び出すだけです。

質問の拡張

重要なのは、通知が複数ある場合、そのうちの 1 つを閉じたい場合はどうすればいいかということです。私はnotify.jsを理解しようとしましたが、idは基本的にnotification_seedのようなパターンであり、これはnotification_文字列と数字で構成される文字列であることがわかりました。ソース コードを見ると、初期seedは 1 であることがわかります。つまり、最初にインスタンス化された Notification の ID はnotification_1になります。図に示すように:

ここで問題が発生します。close() 関数を呼び出して、正しいと思われる 2 つのパラメータを渡しましたが、機能しません。

ID の誤解を防ぐために、ブラウザでデバッグしたところ、インスタンス (Notification のインスタンス) の ID が実際に分析した ID であることがわかりました。

そこで、開発者ツールのデバッグ ツールを使用して、notify.js のclose()関数の実行手順を段階的に確認しました。コードやロジックに問題はないことがわかりました。最後に、インスタンスは splice 関数を通じて対応する ID を持つ Notification も削除しましたが、ページ上の Notification はそのまま残り、消えませんでした (メイン関数は長方形のボックス内にあります)。

上記は、私が個人的に分析を試みた結果の一部です。もちろん、私の能力が限られているため、結局は問題を解決できませんでした。興味のある人は勉強してみてください。

ElementUI の this.$notify.close() 呼び出しが機能しない問題を解決する方法についての記事はこれで終わりです。Element this.$notify.close() 呼び出しに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。