mounted() {
//点击任意位置关闭区域弹窗
document.addEventListener('click', (e) => { //获取弹窗对象
const userCon = document.getElementsByClassName('tanKuang')[0];
const userCon1 = document.getElementsByClassName('tanKuang')[1]; //判断弹窗对象中是否包含点击对象
if (userCon && !userCon.contains(e.target)&& !userCon1.contains(e.target)) {
//如果包含则跳转回之前的页面
this.isShowModal = false;
} }) },

vue中点击其他任意位置关闭弹框的更多相关文章

  1. vue中点击屏幕其他区域关闭自定义div弹出框

    直接上代码: mounted: function () { let that = this; $(document).on('click', function (e) { let dom = $('. ...

  2. vue中点击空白处隐藏弹框(用指令优雅地实现)

    在写vue的项目的时候,弹框经常性出现,并要求点击弹框外面,关闭弹框,那么如何实现呢?且听我一一...不了,能实现效果就好 <template> <div> <div c ...

  3. 点击任意位置关闭(CocosCreator)

    推荐阅读:  我的CSDN  我的博客园  QQ群:704621321  我的个人博客       今天,接触到一个新功能,当弹出某个弹框时,需要点击除弹框的剩余任意位置,来关闭该弹框,例如:当红框内 ...

  4. Android点击其他任意位置收起软键盘

    在Android应用开发中,经常出现这样的需求,用户在输入文字的过程中,可能不想继续输入了,通过滑动或者点击其他位置(除软键盘和EditText以外的任何位置),希望能够自动收回键盘,这个功能可能有些 ...

  5. vue 手机物理返回键关闭弹框

    1.打开弹窗调用 window.history.pishState() 函数 2.关闭弹框 3.mounted 生命周期 监听popstate 事件 4.beforeDestroy 生命周期 移除po ...

  6. 简单数学算法demo和窗口跳转,关闭,弹框

     简单数学算法demo和窗口跳转,关闭,弹框demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  7. vue中超简单的方法实现点击一个按钮出现弹框,点击弹框外关闭弹框

    效果图展示: View层 <template> <div> <div class="mask" v-if="showModal" ...

  8. jQuery点击自身以外地方关闭弹出层

    转载自:http://blog.163.com/abkiss@126/blog/static/325941002012111754349590/ 主要功能是点击显示,然后通过点击页面的任意位置都能关闭 ...

  9. jq点击按钮打开和关闭弹出层,点击除了当前按钮以外的地方关闭弹出层

    1.html <a id="more" onclick="moreFun()">更多</a> <ul id="moreL ...

  10. 小程序中点击input控件键盘弹出时placeholder文字上移

    最近做的一个小程序项目中,出现了点击input控件键盘弹出时placeholder文字上移,刚开始以为是软键盘弹出布局上移问题是传说中典型的fixed 软键盘顶起问题,因此采纳了网上搜到的" ...

随机推荐

  1. sqlserver 生成随机值

    随机生成100以内的整数 select top 10 number,ceiling(rand(checksum(newid()))*100) from master.dbo.spt_valueswhe ...

  2. 动态生成frame时需要对frame类进行注册,否则会出现找不到frame类的错误。

    procedure TMainForm.openFram(Caption, FormClassName, imgIdx: string); var i: integer; sheet: TUniTab ...

  3. 微信小程序分享出去的页面再点进来,如何取值并且在新用户未授权的情况下,授权后跳到当前页面

    1.如何点击分享的页面进来,授权后跳转到当前页面 可以在授权成功后,将openid.头像.昵称入库成功之后,标记一下,及getStorageSync // 通过code获取openid getUser ...

  4. 使用 Vue 3 时应避免的 10 个错误

    Vue 3已经稳定了相当长一段时间了.许多代码库都在生产环境中使用它,其他人最终都将不得不迁移到Vue 3.我现在有机会使用它并记录了我的错误,下面这些错误你可能想要避免. 使用Reactive声明原 ...

  5. Nacos的微服务与本地测试的问题

    前提条件: 这里是微服务上的yml的配置: uri: base-svc-authcenter: 192.168.1.121:28002 base-svc-file: 192.168.1.121:280 ...

  6. 在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载的对象接口

    在基于vue-next-admin 的 Vue3+TypeScript 前端项目中,可以整合自己的 .NET 后端,前端操作一些功能的时候,为了使用方便全局挂载的对象接口,以便能够快速处理一些特殊的操 ...

  7. std常用类型

    std::getline 文档 std::reverse 文档 注意事项 reverse()返回值为void,是对原序列进行修改 std::vector 文档 emplace 和 emplace_ba ...

  8. [C++STL教程]4.map超强的容器,它终于来了!零基础都能理解的入门教程

    之前我们介绍过vector, queue, stack,他们都有一个共同的特点,就是都可以用线性表来模拟.今天我们来学习一个全新且高封装性的容器:map. 作者:Eriktse 简介:19岁,211计 ...

  9. Java基础关于栈和堆的内存分配问题(转载)

    AVA在程序运行时,在内存中划分5片空间进行数据的存储.分别是:1:寄存器.2:本地方法区.3:方法区.4:栈.5:堆. 基本,栈stack和堆heap这两个概念很重要,不了解清楚,后面就不用学了. ...

  10. 谷歌浏览器插件:FeHelper(WEB前端助手)

    背景 在现在的互联网时代,前端开发已经成为一个非常重要的领域.为了提高开发效率和质量,许多前端开发人员都喜欢使用一些相关工具来辅助他们的工作.而谷歌浏览器插件:WEB前端助手(FeHelper)就是其 ...