方法：

步骤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. [转]Vue.js 目录结构

    本文转自:http://www.runoob.com/vue2/vue-directory-structure.html 上一章节中我们使用了 npm 安装项目,我们在 IDE(Eclipse.Ato ...

  2. ubuntu下搭建ecshop

        最近在看ecmobile的开源项目,可以从http://www.ecmobile.cn/agreement.html下载源码或者从github上下载源码https://github.com/G ...

  3. Python——爬虫学习2

    BeautifulSoup插件的使用 这个插件需要先使用pip安装(在上一篇中不再赘言),然后再程序中申明引用 from bs4 import BeautifulSoup html=self.requ ...

  4. Fork开源项目之通讯框架

    项目发布于:https://github.com/HouZhiHouJue/IOCPMSG.看代码前请先看简介.

  5. C# OO（初级思想）。

    继承,多态,封装 在C#中,为了能够合理描述自然界的规律,面向对象的编程引入了继承的概念,是面向对象编程中最重要的概念之一,定义了如何根据现有的类创建新类的过程. 继承:一个类派生出来的子类具有这个类 ...

  6. Grpc helloworld demo的经验

    GreeterGrpc.java这个文件是插件protoc-gen-grpc-java生成的 刚开始直接用类似如下的指令无法生成GreeterGrpc.java文件  protoc --java_ou ...

  7. 创建Web项目运行时出小错误及解决方法

    1.目录结构 2.各文件内容 index.jsp <%@ page contentType="text/html;charset=UTF-8" language=" ...

  8. 2806 红与黑 个人博客：doubleq.win

    个人博客:doubleq.win 2806 红与黑  时间限制: 1 s  空间限制: 64000 KB  题目等级 : 白银 Silver 题解  查看运行结果     题目描述 Descripti ...

  9. System.out.println与System.err.println的区别

    public class Test2 { static { System.out.println("1"); } { System.out.println("2" ...

  10. 用户登陆显示cpu、负载、内存信息

    #用户登陆显示cpu.负载.内存信息 #!/bin/bash # hostip=`ifconfig eth0 |awk -F" +|:" '/Bcast/{print $4}'` ...