直接上代码:

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. postgresql12 b-tree v4空间上和性能上的优化

    在 pg v11 和 v12 上 常见测试用例 CREATE TABLE rel ( a bigint NOT NULL, b bigint NOT NULL ); ALTER TABLE rel A ...

  2. Redis开发与运维:SDS与embstr、raw 深入理解

    对于上一篇文章,我又自己总结归纳并补充了一下,有了第二篇. 概览 <<左移 开始之前,我们先准备点东西:位运算 i<<n 总结为 i*2^n 所以 1<<5 = 2 ...

  3. BIOS和CMOS概念整理

    一:什么是BIOS  BIOS(Basic Input Output System),基本输入输出系统.是被写死在主板ROM只读芯片中的一组程序,在开机的时候首先要去读取的一个小程序. 它是我们可以将 ...

  4. Kotlin实战案例:带你实现RecyclerView分页查询功能(仿照主流电商APP,可切换列表和网格效果)

    随着Kotlin的推广,一些国内公司的安卓项目开发,已经从Java完全切成Kotlin了.虽然Kotlin在各类编程语言中的排名比较靠后(据TIOBE发布了 19 年 8 月份的编程语言排行榜,Kot ...

  5. Flink中的CEP复杂事件处理 (源码分析)

    其实CEP复杂事件处理,简单来说你可以用通过类似正则表达式的方式去表示你的逻辑,表现能力非常的强,用过的人都知道 开篇先偷一张图,整体了解Flink中的CEP中的  一种重要的图  NFA非确定有限状 ...

  6. c语言l博客作业08

    问题 答案 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-2/homework/8655 我在 ...

  7. Python数据分析I

    Python数据分析概述 数据分析的含义与目标 统计分析方法 提取有用信息 研究.概括.总结 Python与数据分析 Python: Guido Van Rossum Christmas Holida ...

  8. ios webp转换jpg

    在项目开发的过程中,遇到了一个问题,就是webp的图片,先解释一下webp是啥,webp是谷歌开发的一种旨在加快图片加载速度的图片格式.图片压缩体积大约只有JPEG的2/3,说白了就是省空间,特别对于 ...

  9. Linux内核设计与实现笔记_1_基本概念

    Linux内核设计与实现笔记_1_基本概念 操作系统 系统这个词包含了操作系统和所有运行在它上面的应用程序.操作系统是指在整个系统中负责完成分最基本功能和系统管理的那些部分,这些部分应该包括: 内核, ...

  10. activate-power-mode,让你在Python编码中,感受炫酷的书写特效!

    Atom Atom 是github专门为程序员推出的一个跨平台文本编辑器,具有简洁和直观的图形用户界面,并有很多有趣的特点:支持CSS,HTML,JavaScript等网页编程语言.说到这里大家以为我 ...