直接上代码:

mounted: function () {
let that = this;
$(document).on('click', function (e) {
let dom = $('.myDiv')[0]; // 自定义div的class if (dom) {
// 如果点击的区域不在自定义dom范围
if (!dom.contains((e.target))) {
that.showMyDiv = false;
}
}
});
},
beforeDestroy() {
$(document).off('click');
}

vue中点击屏幕其他区域关闭自定义div弹出框的更多相关文章

  1. [ vue ] Quasar封装q-dialog组件,在外层实现弹出框的开启和关闭

    场景描述: 见:https://www.cnblogs.com/remly/p/12981582.html 具体实现: <!-- 父组件 --> <template> < ...

  2. UIPresentationController - iOS自定义模态弹出框

    参考: https://developer.apple.com/library/archive/featuredarticles/ViewControllerPGforiPhoneOS/Definin ...

  3. 自定义PopupWindow弹出框(带有动画)

    使用PopupWindow来实现弹出框,并且带有动画效果 首先自定义PopupWindow public class LostPopupWindow extends PopupWindow { pub ...

  4. vue.js 利用组件之间通讯,写一个弹出框例子

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. iOS自定义提示弹出框(类似UIAlertView)

    菜鸟一枚,大神勿喷.自己在牛刀小试的时候,发现系统的UIAlertView有点不喜欢,然后就自己自定义了一个UIAlertView,基本上实现了系统的UIAlertView,可以根据项目的需求修改UI ...

  6. elementUI vue tree input 懒加载 输入下拉树型示例 点击其他区域关闭自定义div

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  7. swing自定义JDialog弹出框

    第一次搞swing,自定义JDialog的例子较少,写下来备忘 ,对JDialog中的文本框进行了验证 package com.chauvet; import java.awt.Component; ...

  8. 自定义ionic弹出框

    <img width="64" height="64" src="img/timg.jpg" style="border-r ...

  9. 微信小程序之自定义底部弹出框动画

    最近做小程序时,会经常用到各种弹框.直接做显示和隐藏虽然也能达到效果,但是体验性太差,也比较简单粗暴.想要美美地玩,添加点动画还是非常有必要的.下面做一个底部上滑的弹框. wxml <view ...

随机推荐

  1. java的回调和C#的委托

    曾经有人对我说java的回调很巧妙. 今天我自己看了一下,回调的关键就是一个接口的事情. 也许是因为用了一定的手法,一开始不好懂吧,所以看懂了会感觉巧妙. 但是我心里的想法却是,真啰嗦! 回调的实例 ...

  2. 记一次安卓app上线应用宝

    背景:前几个月开发了一个安卓app(用的是Dcloud公司的uniapp框架),已经成功上线华为应用市场和小米应用市场.之前上线应用宝是因为没有软著,所以一直也没上线.近期甲方又提出了上架应用宝,于是 ...

  3. 【Luogu P2002&P2341】消息扩散/受欢迎的奶牛

    Luogu P2002 Luogu P2341 使用强连通分量算法缩点 第一题统计入度为0的个数强连通分量数. 第二题的答案为当且仅当仅有一个强连通分量的出度为0时该强连通分量的节点数,原因如下:若一 ...

  4. Unity 工作经历+近期面试经历(二)

    注册博客园后,我原本打算每一份工作经历都记录下来.但是,这份工作已经换了半年了,好几次想要写,又不知道该怎么写.太多的负能量.我始终相信,情绪是会传染的.我基本决定放弃写这篇文章了.就让时间去淡化经历 ...

  5. 2sql

    ------------------------------------ 高级查询-- as 起别名select name as 名字 from studnets;-- 消除重复的行 -- 查看有哪几 ...

  6. JS中的同步异步编程

    首先我们先看看同步与异步的定义,及浏览器的执行机制,方便我们更好地理解同步异步编程. 浏览器是多线程的,JS是单线程的(浏览器只分配一个线程来执行JS)   进程大线程小:一个进程中包含多个线程,例如 ...

  7. Eclipse中查看JAVA源代码显示SOURCE NOT FOUND解决办法

    Problem:Java利用快捷键查看源代码显示Source not found 出现问题的原因:JDK目录下缺失src.zip文件只有javafx-src.zip src.zip文件:Java所有类 ...

  8. 搭建nextcloud私有云存储网盘

    简介: 搭建个人云存储一般会想到ownCloud,堪称是自建云存储服务的经典.而Nextcloud是ownCloud原开发团队打造的号称是“下一代”存储. 真正试用过后就由衷地赞同这个Nextclou ...

  9. P1548 棋盘问题

    题目描述 设有一个N \times MN×M方格的棋盘(1≤N≤100,1≤M≤100)(1≤N≤100,1≤M≤100) 求出该棋盘中包含有多少个正方形.多少个长方形(不包括正方形). 例如:当 N ...

  10. MySQL主从扩展知识

    6月29/7月2日任务 说明:这两天无新课,主要是扩充知识面注意:这两天的任务,需要回专贴.需要你们通过看这些东西总结成自己的心得. 不能照搬,必须要自己理解,能看多少就看多少,看不完也没有关系,但一 ...