図のように、他の場所をクリックしてこのポップアップレイヤーを閉じるにはどうすればよいですか? jquery を使用すると非常に簡単に操作できますが、この機能を vue で実装するための アイデアは何ですか?
モーダルがポップアップしたら、モーダルの下にマスクレイヤーオーバーレイを書き込みます。CSSスタイルはposition: fixed; top: 0; right: 0; bottom: 0; left: 0;で、それにクリックイベントをバインドしてモーダルを閉じます
position: fixed; top: 0; right: 0; bottom: 0; left: 0;
クリック イベントをグローバルにバインドし、このポップアップ レイヤー上でクリック イベントがバブリングしないようにして、必要な効果を実現できます。
jquery が導入されている場合は、jquery の書き込みメソッドを使用して現在のコンポーネントに書き込みます。それ以外の場合は、ネイティブ イベントを自分で書きます。 element.uiのポップオーバーコンポーネントの関連記述メソッドの63行目を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
モーダルがポップアップしたら、モーダルの下にマスクレイヤーオーバーレイを書き込みます。CSSスタイルは
position: fixed; top: 0; right: 0; bottom: 0; left: 0;で、それにクリックイベントをバインドしてモーダルを閉じますクリック イベントをグローバルにバインドし、このポップアップ レイヤー上でクリック イベントがバブリングしないようにして、必要な効果を実現できます。
jquery が導入されている場合は、jquery の書き込みメソッドを使用して現在のコンポーネントに書き込みます。それ以外の場合は、ネイティブ イベントを自分で書きます。
element.uiのポップオーバーコンポーネントの関連記述メソッドの63行目を参照してください。