84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
図のように、他の場所をクリックしてこのポップアップレイヤーを閉じるにはどうすればよいですか? 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行目を参照してください。