Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

1. 绑定元素

2. mounted生命周期

3. 实现思路

  • 页面挂载完后，监听全局点击事件
  • 获取当前点击的元素，根据需求获取当前元素本身的属性
  • 判断当前点击元素与要隐藏的元素是否相同
  • 当前点击元素与要隐藏的元素不相同则隐藏

4. 最终效果

接着看下vue实现点击目标元素外页面的其他地方隐藏弹窗

方法：

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

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

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

PS：下面看下vue实现点击其他地方隐藏div

方法一：　　

　　通过监听事件

document.addEventListener('click',function(e){
    if(e.target.className!='usermessage'){
     that.userClick=false;
    }
})

方法二（比较好）：

　　给最外层的div加个点击事件 @click="userClick=false"

　　给点击的元素上面加上：@click.stop="userClick=!userClick"

方法三：

<template>
<!--向页面添加关闭div的事件监听-->
<div class="page" @click="hide">

<!--添加.stop防止page的点击事件触发，导致无法显示div-->
<button @click.stop="show">点击显示div</button>

<!--指定的div。添加.stop防止点击div内的元素时，整个div被关闭-->
<div @click.stop>
...
</div>

</div>
<template>

<script>
export default {
methods:{
show(){},
hide(){}
}

}
</script>

小结：

通过vue.js 事件的.stop修饰符可以阻止事件继续冒泡传播，也可以使用原生js事件的event.stopPropagation()方法。

通过向指定的div添加.stop，可以实现只有点击非该div内的元素时，才会往上冒泡至page，从而实现点击其他地方隐藏div。

要向触发显示div的按钮添加.stop，否则一点击按钮，触发show()之后传播到page，立马就会触发hide()，div就无法显示。

总结

以上所述是小编给大家介绍的Vue实现点击当前元素以外的地方隐藏当前元素，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • Vue.js 点击按钮显示/隐藏内容的实例代码

    实例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <d

  • Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩）

    在项目中往往会有这样的需求: 弹出框(或Popover)在 show 后,点击空白处可以将其 hide. 针对此需求,整理了三种实现方式,大家按实际情况选择. 当然,我们做项目肯定会用到 UI 框架,常见的 Element 中的组件提供了这样的方法. 但是,就算使用框架,有些时候还是要用到的,比如: Element 中的 Popover,当我们想使用手动方式(trigger 触发方式为 manual时)控制它的 show & hide 的时候,就要自己实现这个功能啦. 第一种方式:最普通的手动监

  • 详解vue中点击空白处隐藏div的实现（用指令实现）

    详解vue中点击空白处隐藏div的实现（用指令实现）

    简单想应该怎么实现? 1.肯定是给document增加一个click事件监听 2.当发生click事件的时候判断是否点击的当前对象 结合着本思路和指令咱们来实现. 简单介绍vue指令 一个指令定义对象可以提供如下几个钩子函数 (均为可选): bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行一次性的初始化设置. inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中). update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNod

  • vueJS简单的点击显示与隐藏的效果【实现代码】

    目前前端框架太多,接触过angular.ember,现在开始倒腾vue 此处用到v-if.v-else.v-show,v-if或让元素不在DOM上,v-show只是改变display:block属性,感觉v-if好 感觉跟适合. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if.v-else.v-show&l

  • vue实现点击隐藏与显示实例分享

    如何使用vue进行按钮点击后指定区域内容隐藏,再次点击按钮隐藏内容显示.实现思路:首选需要设置一个属性为true(show:true),然后使用v-if把show属性绑定到要显示与内容的标签身上,最后给点击按钮添加点击事件,当show属性为true就设置为false,为false就设置为true(this.show = !this.show)即可. 1.新建一个html页面,然后在这个代码页面上创建一个div标签id为app,然后在这个div标签里创建一个按钮标签和一个用于显示隐藏的div标签.

  • vue组件实现弹出框点击显示隐藏效果

    本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码,供大家参考,具体内容如下 效果如下图 由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候,操作执行完后当前页面的更改按钮已经被弹出框覆盖了.所以只能在弹出页面点击取消实现关闭隐藏弹出框.这样就需要写两个点击事件,但是两个点击事件就会有冲突,需要点击两下才能使弹出框显示和隐藏.然后我就用的以下方法,希望可以帮到大家!!! 代码如下 1.在当前页面中(

  • vue 点击展开显示更多(点击收起部分隐藏)

    vue 点击展开显示更多(点击收起部分隐藏)

    功能如下: 这里就需要一开始只显示6个数据,点击展开才显示全部 HTML里调用showdetailList: <div> <p v-for="(item, index) in showdetailList"> <span>{{item.title}}</span> <span>{{item.name}}</span> </p> </div> <div v-if="detail

  • Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

    Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

    1. 绑定元素 2. mounted生命周期 3. 实现思路 页面挂载完后,监听全局点击事件 获取当前点击的元素,根据需求获取当前元素本身的属性 判断当前点击元素与要隐藏的元素是否相同 当前点击元素与要隐藏的元素不相同则隐藏 4. 最终效果 接着看下vue实现点击目标元素外页面的其他地方隐藏弹窗 方法: 步骤1:给页面最外出的元素div加点击事件:@click="popShow = false". 步骤2:给点击目标元素加点击事件:@click="popShow = true

  • jQuery除指定区域外点击任何地方隐藏DIV功能

    具体代码如下所示: $('body').click(function(e) { var target = $(e.target); // 如果#overlay或者#btn下面还有子元素,可使用 // !target.is('#btn *') && !target.is('#overlay *') if(!target.is('#btn') && !target.is('#overlay')) { if ( $('#overlay').is(':visible') ) { $

  • JQuery显示隐藏页面元素的方法总结

    在jquery中显示隐藏div方法方法有很多种,如比较简单的函数show(),hide(),toggle(),slideDown()然后还有css设置div的style属性都可操作,下面我来介绍. show()方法 显示出隐藏的 <p> 元素. 复制代码 代码如下: $(".btn2").click(function(){   $("p").show(); }); toggle()方法 toggle() 方法切换元素的可见状态. 如果被选元素可见,则隐藏

  • vue 的点击事件获取当前点击的元素方法

    首先 vue的点击事件 是用 @click = "clickfun()" 属性 在html中绑定的, 在点击的函数中 添加$event 参数就可以 比如 <button @click = "clickfun($event)">点击</button> methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 } }, 以上这篇vue 的点击事件获取当前

  • vue点击按钮实现让页面的某一个元素全屏展示

    目录 点击按钮让页面的某一个元素全屏展示 先上效果图 页面结构 在页面加载时添加监听 vue全屏和退出全屏调用事件 页面全屏 部分元素全屏 退出全屏调用事件 点击按钮让页面的某一个元素全屏展示 先上效果图 项目情况:vue+screenfull插件 其实文档上写的很清楚:screenfull文档 点击页面的全屏图标,使包裹地图的div实现全屏. 页面结构 在页面加载时添加监听 mounted () { const element = document.getElementById('map_co

  • vue实现点击出现操作弹出框的示例

    如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽,我们可以根据不同的场景,利用插槽随意在这个弹框里插入任何元素,这个弹框显示时根据我鼠标的点击位置,定位弹窗的位置,并在组件里面监听鼠标抬起事件,触发事件时将弹窗隐藏: 接着在函数中利用createElement和appendChild方法将弹出框创建并插入到页面中:   本次实现基于vuecli3 接下来,具体实现: 首先,我们先写一个demo组

  • vue项目实现点击目标区域之外可关闭(隐藏)目标区域

    vue项目实现点击目标区域之外可关闭(隐藏)目标区域

    目录 点击目标区域之外可关闭目标区域 解决思路 方法一 方法二 vue点击组件外部隐藏组件自身 示图:点击外层元素隐藏自定义车牌选择框 代码如图中所写 核心 点击目标区域之外可关闭目标区域 解决思路 方法一 1.vue模块中的内容  -- class为myPanel的div是我们要处理的那个小组件. <template>     <div class="hello">         <div class="myPanel" v-if=

  • vue实现点击某个div显示与隐藏内容功能实例

    1.首先在所需要隐藏或显示的内容div加v-show,代表判断是否显示或隐藏 <div v-show="shopShow">内容</div> 2.我这里是在打开内容中有一个 × 号来关闭显示效果,在iconfont图标的div加入一个点击事件 <div @click="toggleShopShow"> <span class="iconfont icon-close"></span> &

  • 使用vue实现点击按钮滑出面板的实现代码

    在通信的时候容易出错,或者信息根本传不过来.那么这里就示例一下,怎么通过组件之间的通信完成点击事件. index.vue文件中: <div> <el-button type="primary" @click="onShow">点我</el-button> </div> 传递中介 <addForm :show="formShow" @onHide="formShow = false&q

随机推荐