vue项目实现点击目标区域之外可关闭(隐藏)目标区域
更新时间：2022年03月26日 16:43:57 作者：545龙哥哥
这篇文章主要介绍了vue项目实现点击目标区域之外可关闭(隐藏)目标区域，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
点击目标区域之外可关闭目标区域
解决思路
方法一
1、vue模块中的内容 -- class为myPanel的div是我们要处理的那个小组件。
<template> <div class="hello"> <div class="myPanel" v-if="panelShow"></div> </div> </template>
2、定义点击事件 -- 直接在生命周期钩子函数mounted(dom挂载完成之后)中添加点击事件，通过判断目标元素的class名称可实现对应的效果
mounted(){
document.addEventListener('click', (e)=> {
if (e.target.className != 'myPanel') {
this.panelShow= false;
}
})
}方法二
1、vue模块中的内容 -- class为myPanel的div是我们要处理的那个小组件。其中，stop修饰符是用来阻止函数的传递，简单理解就是执行自身绑定的事件，不影响其他位置绑定的事件。此处clickPanel函数中可不做任何处理，单纯用来阻止点击事件传递到绑定在body上的click事件去。
<template> <div class="hello"> <div @click.stop="clickPanel" class="myPanel" v-if="panelShow"></div> </div> </template>
2、通过watch监听panelShow的值，对应在body绑定点击事件/取消绑定的点击事件
watch: {
panelShow(val) {
if(val) {
document.body.addEventListener('click', () => {
this.panelShow = false;
})
} else {
document.body.removeEventListener('click', () => {});
}
}
}注：也可以通过给body绑定一个点击事件，然后去判断点击的元素是否是需要隐藏掉的元素。
vue点击组件外部隐藏组件自身
在开发组件的时候，点击组件外部隐藏组件自身的这种情况很长见到，例如：时间选择框组件，下拉选件等。
示图:点击外层元素隐藏自定义车牌选择框
代码如图中所写
核心
1、最外层div中添加一个@click.stop（取消事件冒泡），可以不添加事件名。
2、在mounted给body添加一个点击事件，事件触发组件的隐藏。
document.body.addEventListener('click', () => {
this.show = false;
}, false);以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue项目配置element-ui容易遇到的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
在vue项目开发中,我们需要对数组进行处理等问题,这里简单记录遍历数组的几种方法,这篇文章主要给大家介绍了关于vue中数组常用的6种循环方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
VUE2.0+Element-UI+Echarts封装的组件实例
下面小编就为大家分享一篇VUE2.0+Element-UI+Echarts封装的组件实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章将利用Vue3和Canvas编写一个童年经典游戏—坦克大战，文中的示例代码讲解详细，感兴趣的小伙伴快来跟随小编一起学习一下吧2022-03-03
基于elementUI使用v-model实现经纬度输入的vue组件
这篇文章主要介绍了基于elementUI使用v-model实现经纬度输入的vue组件,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
这篇文章主要为大家详细介绍了Vue+Router+Element实现简易导航栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最近在做vue的项目时发现了一个问题，今天就来解决一下，本文主要介绍了elementUI的table表格改变数据不更新问题解决，感兴趣的可以了解一下2022-02-02
vue中使用过滤器filters的this为undefined的问题
这篇文章主要介绍了vue中使用过滤器filters的this为undefined的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
这篇文章主要为大家详细介绍了vue2.0多条件搜索组件的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
Vue2+Elementui Dialog实现封装自定义弹窗组件
在日常的管理系统界面中,我们写的最多的除了列表表格之外,就是各种弹窗组件,本文就来为大家详细介绍一下Vue2如何结合Elementui Dialog实现封装自定义弹窗组件,希望对大家有所帮助2023-12-12
最新评论