直接上代码:

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. 推荐收藏系列:一文理解JVM虚拟机(内存、垃圾回收、性能优化)解决面试中遇到问题(图解版)

    欢迎一起学习 <提升能力,涨薪可待篇> <面试知识,工作可待篇 > <实战演练,拒绝996篇 > 欢迎关注我博客 也欢迎关注公 众 号[Ccww笔记],原创技术文章 ...

  2. 2019-9-16:渗透测试,基础学习,Linux下软件安装,环境搭建,笔记

    Centos linux下软件安装yum 通过分析rpm包头数据后,自动解决依赖关系,直接云端下载软件,根据不同版本系统获取不同软件信息,按顺序下载rpm包,安装软件yum search 软件名:搜索 ...

  3. day 39 盒模型 display 浮动

    一.盒模型 属性: width:内容的宽度 height:内容的高度 padding:内边距 内容到边框的距离 border:边框 margin:外边距 另一个边到另一个边的距离 盒模型的计算: 总结 ...

  4. day 12 函数名的应用 闭包 迭代器

    今日主要内容 1, 函数名的应用,第一类对象 函数名可以像变量一样进行使用   #再函数名后面添加() 才是对函数的调用, 否则打印的是函数的内存地址 1.赋值 2.作为list元素 3.作为参数 d ...

  5. .Net Core 3.0 使用 Serilog 把日志记录到 SqlServer

    Serilog简介 Serilog是.net中的诊断日志库,可以在所有的.net平台上面运行.Serilog支持结构化日志记录,对复杂.分布式.异步应用程序的支持非常出色.Serilog可以通过插件的 ...

  6. ##* %%* linux变量处理

    链接来自他们分享,,,, 如有侵权,请联系本人删除,本人将立即删除.停止分享. https://blog.csdn.net/fengzijinliang/article/details/4252021 ...

  7. Flask入门学习——蓝图Blueprint

    flask蓝图可以实现应用程序的模块化,即通常作用于相同的url前缀,eg:/user/id,/user/profile等类似这样,可以放在一个模块当中,这样会让应用更加清晰便于开发与维护. 这里有个 ...

  8. CentOS 7 Cobbler 自动化安装系统

    在上一篇Cobbler 安装中,配置好了Cobbler,下面来配置自动化安装 配置cobbler-DHCP # 修改settings中参数,由cobbler控制dhcp [root@cobbler ~ ...

  9. 区块链学习笔记:D04 区块链在各行业领域的应用(二)

    这节课主要是政务领域.版权存证领域.能源领域的应用案例介绍 1.房屋租赁联盟链 特点:真实可信.透明补贴.便于追溯.公共监督 节点:房屋运营节点.房管局节点.社保局节点.财政局节点.教育部门节点(多节 ...

  10. luogu P1938 [USACO09NOV]找工就业Job Hunt

    题目描述 奶牛们正在找工作.农场主约翰知道后,鼓励奶牛们四处碰碰运气.而且他还加了一条要求:一头牛在一个城市最多只能赚D(1≤D≤1000)美元,然后它必须到另一座城市工作.当然,它可以在别处工作一阵 ...