方法：

步骤1：给页面最外出的元素div加点击事件：@click=“popShow = false”。

步骤2：给点击目标元素加点击事件：@click=“popShow = true”。

备注：popShow 为控制弹窗显示与隐藏的标志。

vue实现点击目标元素外页面的其他地方隐藏弹窗。的更多相关文章

  1. js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div

    点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...

  2. Vue在点击内部元素时（获得焦点），怎样让外部div元素样式变化？

    问题: div内部有很多元素,div. p. span .input等,各元素有嵌套,现在点击某元素时需要最外面这个div边框高亮,例如,点击了input开始输入 假设html 结构如下  <d ...

  3. vue移动端点击一个元素缩小，松手的时候元素恢复正常

    active伪类解决 HTML代码 <div class='box'> </div> CSS代码 .box { width: 100px; height: 100px; bac ...

  4. jq 点击按钮显示div,点击页面其他任何地方隐藏div

    css .bl_rencai_32{ float: left; height: 35px; line-height: 35px; } .bl_rencai_32 >input{ width: 3 ...

  5. vue点击除了某组件本身的其它地方, 隐藏该组件的方法

    点击emoji表情标签, 出现标签组件,点击其它地方, 改组件消失的效果; <template> <div class="writeZoon"> <d ...

  6. contains 之 点击元素外位置隐藏元素

    contains 之 点击元素外位置隐藏元素 api: contains   检测一个元素包含在另一个元素之内  详解:http://www.runoob.com/jquery/misc-contai ...

  7. 【JS】点击目标外事件与IFRAM自适应高度

    一.点击目标外事件 $(document).mouseup(function(e){ var _con = $('.dropdown-multiSelect-list'); // 设置目标区域 if( ...

  8. vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字

    点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址: https://xibushijie.github.io/static/addClass.html &l ...

  9. 在vue中的点击事件怎么获取当前点击的元素

    首先 vue的点击事件 是用 @click = “clickfun()” 属性 在html中绑定的,在点击的函数中 添加$event 参数就可以比如<button @click = “click ...

随机推荐

  1. vs2015 点击cshtml 后提示 "无效指针" 的解决办法

    1. 关闭vs 2. 删除 %LocalAppData%\Microsoft\VisualStudio\14.0\ComponentModelCache 3. 打开vs OK 解决

  2. python之virtualenv的简单使用

    什么是virtualenv? virtualenv可以创建独立Python开发环境,比如当前的全局开发环境是python3.6,现在我们有一个项目需要使用django1.3,另一个项目需要使用djan ...

  3. Angular 应用中的登陆与身份验证

    Angular 经常会被用到后台和管理工具的开发,这两类都会需要对用户进行鉴权.而鉴权的第一步,就是进行身份验证.由于 Angular 是单页应用,会在一开始,就把大部分的资源加载到浏览器中,所以就更 ...

  4. DQ8通关攻略

    <勇者斗恶龙8>作为勇者斗恶龙系列首次实现3D的一作,游戏无论是从画面.音效还是游戏系统都表现非常不俗,这款游戏也是PS2主机上必玩的一款大作. 作为PS2平台上唯一一款勇者斗恶龙的正传新 ...

  5. Hadoop源码学习笔记(1) ——第二季开始——找到Main函数及读一读Configure类

    Hadoop源码学习笔记(1) ——找到Main函数及读一读Configure类 前面在第一季中,我们简单地研究了下Hadoop是什么,怎么用.在这开源的大牛作品的诱惑下,接下来我们要研究一下它是如何 ...

  6. 微软2016校园招聘在线笔试-Professor Q's Software

    题目2 : Professor Q's Software 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Professor Q develops a new softw ...

  7. python Tensorflow 实现图像的卷积处理

    1.convolution.py import numpy as np from sklearn.datasets import load_sample_images import tensorflo ...

  8. WC2017 游记

    你若安好,便是晴天. 其实本来是有一个写的比较详细的游记的……然而后来给断了,懒得补上了,简单一点好了. Day 0 早早爬起来去赶高铁…… 路上没太多可以写的……坐高铁的时候想起来了一些不开心的事情 ...

  9. MyEclipse去除网上复制下来的代码带有的行号（使用正则表达式）

    一.正则表达式去除代码行号 作为开发人员,我们经常从网上复制一些代码,有些时候复制的代码前面是带有行号,如: MyEclipse本身自带有查找替换功能,并且支持正则表达式替换,使用正则替换就可以很容易 ...

  10. JavaScript的进阶之路（四）理解对象2

    对象的三个属性 原型属性 1.var v={}的原型是Object.prototype;继承了一个constructor属性指代Object()构造函数,实际的原型是constructor.proto ...