直接上代码:

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. Python 并发总结,多线程,多进程,异步IO

    1 测量函数运行时间 import time def profile(func): def wrapper(*args, **kwargs): import time start = time.tim ...

  2. 三维目标检测论文阅读:Deep Continuous Fusion for Multi-Sensor 3D Object Detection

    题目:Deep Continuous Fusion for Multi-Sensor 3D Object Detection 来自:Uber: Ming Liang Note: 没有代码,主要看思想吧 ...

  3. Java数组定义及初始化

    数组定义及初始化 数组这玩意是一种用于存放数据最常见数据结构. 数组的的概念及注意点 数组要求所有的数组元素具有相同的数据类型,且只能存在一种数据类型,要多专一有多专一. 数据类型既可以是基本类型也可 ...

  4. 联想Y7000,I5-9300H+Nvidia GTX 1050, kali linux的nvidia显卡驱动安装

    转载自,Linux安装NVIDIA显卡驱动的正确姿势 https://blog.csdn.net/wf19930209/article/details/81877822#NVIDIA_173 ,主要用 ...

  5. 【Luogu P3379】LCA问题的倍增解法

    Luogu P3379 题意:对于两个节点,寻找他们的最近公共祖先. 一个显而易见的解法是对于每一个节点我们都往上遍历一遍,记录下它每一个祖先,然后再从另一个节点出发,一步一步往上走,找到以前记录过第 ...

  6. 金蝶天燕中间拒绝put、delete请求解决方案

    项目要求支持国产化,那就国产化呗!使用金蝶天燕中间件替代weblogic,一切部署好后发现所有以put.delete请求的按钮全部无效,原因是中间件配置文件默认拒绝put.delete请求 解决方案为 ...

  7. javaScript中的indexOf使用方法

    JavaScript中的indexOf使用方法 概述 indexOf大小写敏感,其中的O要大写 对于字符串而言 indexOf返回字符串第一次出现的位置,若没有出现返回-1 1 var str = & ...

  8. IDEA 自定义代码块

    使用快捷键(ctrl+alt+s)找到:从idea的菜单File->Settings->Editor->Live Templates 先添加Template Group,然后添加Li ...

  9. VUE的中v-if和v-shou的区别

    v-if的特点:每次都会重新删除或创建元素 v-shou的特点:每次执行都只是切换了元素的display:none的属性 v-if的缺点: 每次使用都会有较高性能消耗(频繁的切换元素建议不适用,建议使 ...

  10. Delphi - 手把手教你基于D7+Access常用管理系统架构的设计与实现 (更新中)

    前言 从事软件开发工作好多年了,学的越深入越觉得自己无知,所以还是要对知识保持敬畏之心,活到老,学到老! 健身和代码一样都不能少,身体是革命的本钱,特别是我们这种高危工种,所以小伙伴们运动起来!有没有 ...