• 技术文章 >web前端 >Vue.js

    vuejs怎么关闭弹窗

    藏色散人藏色散人2021-09-06 09:38:24原创825

    vuejs关闭弹窗的方法:1、创建html代码结构;2、判断所点击的区域是否在“.mask_popup”中;3、通过“hideMaskPopup(e){...}”关闭弹窗即可。

    本文操作环境: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怎么关闭弹窗的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:vuejs
    上一篇:如何解决vuejs中引入css报错问题 下一篇:vuejs是国产框架吗
    线上培训班

    相关文章推荐

    • vuejs怎么动态改变title• vuejs怎么在页面实现日期• vuejs怎么安装依赖• vuejs 如何引用js• vuejs常见报错有哪些

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网