vuejs怎么关闭弹窗

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

vuejs怎么关闭弹窗

本文操作环境:windows7系统、vue2.5.17版,DELL G3电脑。

vuejs怎么关闭弹窗?

vue.js点击弹窗以外的区域关闭弹窗

点击弹窗外的区域关闭弹窗的代码结构

立即学习“前端免费学习笔记(深入)”;

html:

内容代码.....

 

登录后复制

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怎么关闭弹窗的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3019874.html

(0)
上一篇 2025年3月13日 05:31:52
下一篇 2025年2月26日 08:09:48

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vuejs是国产框架吗

    vuejs算是国产框架,因为vuejs框架的作者是拥有中国国籍的尤雨溪,该作者属于独立开源开发者,目前全职开发和维护Vue.js,所以说vuejs是国产框架。 本文操作环境:windows7系统、vue2.5.17版,DELL G3电脑。 …

    2025年3月13日
    200
  • vuejs的生命周期是什么

    vuejs的生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。 本教程操作环境:windows7系统、vue2…

    2025年3月13日 编程技术
    200
  • 怎么在idea创建vuejs项目

    创建方法:1、安装Node;2、打开idea,点击“Create New Project”-“Static Web”,填写项目名,点击“Finis”;3、打开idea的Terminal,执行指令来安装vue脚手架工具、初始化vue项目即可。…

    2025年3月13日 编程技术
    200
  • vuejs怎么实现全局状态管理

    在vuejs中可以利用vuex实现全局状态管理;Vuex是一个专为Vue.js应用程序开发的状态管理模式,可以用来管理全局数据,可以管理复杂应用的数据状态,比如兄弟组件的通信、多层嵌套的组件的传值等等。 本教程操作环境:windows7系统…

    2025年3月13日
    200
  • vuejs有哪些使用场景

    vuejs的使用场景:1、单页面应用程序;2、移动端开发,可以结合i-view、Element UI等一些成熟的前端UI库一起开发;3、维护较少,组件复用要求不高的项目;4、具有复杂交互逻辑的前端应用等。 本教程操作环境:windows7系…

    2025年3月13日
    200
  • vuejs算什么

    vuejs是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用;Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。 本文操作环境:Windows7系统、vue2.5.17…

    2025年3月13日
    200
  • 怎么下载vuejs框架

    下载vuejs框架的方法:1、打开vuejs官网;2、在打开的网页上,找到并点击“GITHUB”按钮;3、根据需求选择下载脚本的版本;4、下载VEU脚本框架即可。 本文操作环境:windows7系统、Vue2.9.6版,DELL G3电脑。…

    2025年3月13日 编程技术
    200
  • vuejs怎么删除cookie

    vuejs删除cookie的方法:1、通过getCookie读取cookie;2、通过setCookie设置cookie;3、通过“delCookie (name) {…}”删除cookie即可。 本文操作环境:windows7…

    2025年3月13日
    200
  • vue路由传值的几种方式是什么

    vue路由传值的方式:1、利用“router-link”路由导航来传递;2、调用“$router.push”实现路由传参数值;3、通过路由属性中的name匹配路由,再根据params传递参数值;4、通过query来传递参数值。 本教程操作环…

    2025年3月13日
    200
  • vuejs开发如何启动项目

    vuejs启动项目的方法:1、安装node.js;2、安装“@vue/cli”;3、使用“vue create 项目名称”命令创建一个项目;4、使用cd命令进入vue项目目录中;5、执行“npm run serve”命令启动项目。 本教程操…

    2025年3月13日 编程技术
    200

发表回复

登录后才能评论