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. Jmeter--请求结果写入文件并生成报告

    一.数据写入文件 Jmeter中监听器控件中,都可以将"所有数据写入一个文件",且文件形式有:xml\jtl\csv 在需要写入的监听器下点击"浏览"按钮,选择 ...

  2. 中文数据导入到hive,出现乱码

    中文数据导入到hive,出现乱码 解决方法: 右键要导入的数据文件,选择用Notepad++打开,然后点击"编辑"-->转为UTF-8,最后保存即可. 然后在上传到指定路径下 ...

  3. PHP文件及运行(适合PHP初学者)

    PHP文件可包含HTML.JavaScript代码和 PHP代码,换句话说PHP 代码可以嵌入HTML文档.PHP文件名以php为后缀. PHP代码以"<?php"开头,以& ...

  4. 学习ASP.NET Core Blazor编程系列三十——JWT登录(4)

    学习ASP.NET Core Blazor编程系列文章之目录 学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...

  5. 因为手哆嗦,发现了一个关于Python逗号的隐藏用法

    python常规的用法,众多pythoner早已​熟烂于心,如: 1.当一个元组只有一个元素时 a = (1, ) 2.当表示解包一个容器时 a = [('amo', 1), ('bmo', 1)] ...

  6. 解密Prompt系列4. 升级Instruction Tuning:Flan/T0/InstructGPT/TKInstruct

    这一章我们聊聊指令微调,指令微调和前3章介绍的prompt有什么关系呢?哈哈只要你细品,你就会发现大家对prompt和instruction的定义存在些出入,部分认为instruction是promp ...

  7. Win11右键菜单改回传统样式

    Win11右键菜单,比较不人性化,隐藏了一些常用选项,需要点"更多选项"才能显示,多次一举. 解决方法,一句话: reg.exe add "HKCU\Software\C ...

  8. SpringBoot 项目使用 Sa-Token 完成登录认证

    一.设计思路 对于一些登录之后才能访问的接口(例如:查询我的账号资料),我们通常的做法是增加一层接口校验: 如果校验通过,则:正常返回数据. 如果校验未通过,则:抛出异常,告知其需要先进行登录. 那么 ...

  9. Notion AI : 让表达如此简单

    前言 写作如说话,想说与说明白中间隔着沟壑! 下面用 Notion AI 作诗来作为本文开头吧. 想说与说明白(作者:Notion AI) 想说千言万语,说明白却难如登天. 言语之间,沟壑重重,思想与 ...

  10. .net6的IIS发布部署

    1.打开控制面板,打开程序 2.点击启动或关闭windows功能 3.在其中选择要设置的IIS功能 4.重启IIS服务 5.发布项目 6.在开始菜单搜索IIS,点击IIS管理器 7.右击网站,点击添加 ...