方法：

步骤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. 关于Hall定理的学习

    基本定义 \(Hall\) 定理是二分图匹配的相关定理 用于判断二分图是否存在完美匹配 存在完美匹配的二分图即满足最大匹配数为 \(min(|X|,|Y|)\) 的二分图,也就是至少有一边的点全部被匹 ...

  2. IOS项目之弹出动画终结篇

    在之前写过IOS项目之弹出动画一.IOS项目之弹出动画二.IOS项目之弹出动画三,今天来一个终极封装已经上传到Github上弹出动画总结篇UIPopoverTableView. UIPopoverTa ...

  3. 数组相关方法积累(vue\ag等特别常用)

    改变原数组的: shift:将第一个元素删除并且返回删除元素,空即为undefined unshift:向数组开头添加元素,并返回新的长度 pop:删除最后一个并返回删除的元素 push:向数组末尾添 ...

  4. 八段代码彻底掌握 Promise

    1.Promise的立即执行性 var p = new Promise(function(resolve, reject){ console.log("create a promise&qu ...

  5. [转]HTTP Error 502.5 - Process Failure asp.net core error in IIS

    本文转自:http://www.cnblogs.com/autohome7390/p/6840652.html 在windows server 2012 上安装完dotnet-win-x64.1.1. ...

  6. php常用的时间函数

    测试环境:php5.3.29 unix时间戳(从Unix 纪元(January 1 1970 00:00:00 GMT)到给定时间的秒数.).以下简称时间戳. 设置默认时区 date_default_ ...

  7. Android Studio中 图片资源存在但是运行时报错的问题

    最近看安卓遇到了了一个很头疼的问题,我明明在drawable文件夹中添加了图片资源,Android Studio 中也预加载了图片,但是在运行的时候就开始咔咔咔报错 = = 如下图所示: 图片后面显示 ...

  8. layui使用 ——父，子页面传值

    页面传值是非常常用的,layui自带弹窗功能,但是内置使用的是location.href 暂时没找到方法条件请求头,所以在后台需要放开拦截器, layer.open({ type : 2, title ...

  9. [LeetCode] Add Two Numbers题解

    Add Two Numbers: You are given two non-empty linked lists representing two non-negative integers. Th ...

  10. H5 Js图片转base64编码

    <!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...