要素の$notifyポイントについての簡単な説明

当初の意図は、element-ui の $notify 通知をコンポーネントにカプセル化することでした。ログインに成功した後、在庫不足のインターフェースを呼び出します。インターフェースのリスト内の在庫が 0 より大きい場合は、この通知を表示し、テキストにクリック イベントを提供します。

したがって、最初に思いつくのは、dangerouslyUseHTMLString属性を使用してHTML文字列を挿入することです。

エクスポートデフォルト{
    メソッド: {
      オープン12() {
        これを通知します。{
          タイトル: 'HTML スニペット'、
          危険なHTML文字列を使用する: true、
          メッセージ: '<strong>これは <i id="show">HTML</i> スニペットです</strong>'
        });
      }
    }
  }

しかし、メッセージ内のHTML文字列は実際にはVueから分離されています。たとえば、@clickメソッドを使用してイベントをバインドすることはできません。そのため、jsのDOM操作を使用してバインドする必要があります。

まず、コンポーネントのマウント方式で取得することを考えました

ドキュメントのクエリセレクター('#show');

しかし、この方法で取得されるものは null です。なぜでしょうか?

マウントすると、コンポーネント テンプレート内の DOM がマウントされます。ただし、コンポーネントにはテンプレートがありません。メソッドでは this.$notify のみを使用します。マウント後、通知はアプリに表示されません。

role="alert" は通知ボックスなので、通常のコンポーネントとして操作することはできません。また、コンポーネントをマウントした後にマウントされる場合もあります。つまり、mouted メソッドを使用すると、コンポーネントのみがマウントされますが、内部のモチーフは存在しない可能性があるため、null になります。

バインディングイベントなどの js メソッドを追加する場合は、html にリスナーを追加する必要がありますが、タイミングを把握する必要があります。

ここではまだnotifyを使用しません。notifyはテキストを表示する傾向がある通知クラスであるべきであり、ここでnotifyを使用するのは少し不適切かもしれないからです。

これで、要素 $notify の要点に関するこの記事は終了です。要素 $notify の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。