ホームページ > ウェブフロントエンド > Vue.js > vuejsでポップアップウィンドウを閉じる方法

vuejsでポップアップウィンドウを閉じる方法

藏色散人
リリース: 2023-01-13 00:45:25
オリジナル
4621 人が閲覧しました

vuejs でポップアップ ウィンドウを閉じる方法: 1. HTML コード構造を作成します; 2. クリックされた領域が ".mask_popup" 内にあるかどうかを確認します; 3. "hideMaskPopup(e){ ...}" ウィンドウをポップアップ表示するだけです。

vuejsでポップアップウィンドウを閉じる方法

この記事の動作環境: Windows7 システム、vue2.5.17 バージョン、DELL G3 コンピューター。

vuejs でポップアップ ウィンドウを閉じる方法は?

vue.js ポップアップ ウィンドウの外側の領域をクリックして、ポップアップを閉じます。アップ ウィンドウ

ポップアップ ウィンドウをクリックします。ウィンドウの外側の領域でポップアップ ウィンドウを閉じるためのコード構造

html:

<p class="publish_mask_popup" @click="hideMaskPopup" v-show="showMaskPopup">
	<p class="mask_popup">
		内容代码.....	</p>
 </p>
ログイン後にコピー

js:

	data(){
		showMaskPopup:false
	},
	methods: {
       hideMaskPopup(e){
              let mask = document.querySelector(".mask_popup");
              if (mask) {
                  if (!mask.contains(e.target)) {//判断所点击的区域是否在.mask_popup中
                      this.showMaskPopup = false;
                  }
              }
        }
    },
ログイン後にコピー

達成効果:
vuejsでポップアップウィンドウを閉じる方法

以上がvuejsでポップアップウィンドウを閉じる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート