vue中实现点击空白区域关闭弹窗的两种方法

1. 第一种做法

首页在外层容器里面取一个名字为main，即ref="main",当bankSwitch为true的时候，弹窗出现

<div class="selectedBorder" ref="main">
	<div class="bankItem" v-if="bankSwitch == true">
		你好我是弹窗里面的内容部分
 	</div>
</div>

所触发的事件如下：

首页，先在全局创建一个点击事件:bodyCloseMenus

事件作用：当点击main容器的时候（this.refs.main && !this.refs.main.contains(e.target)），并且弹窗出现的时候（self.bankSwitch == true），点击空白区域将弹窗关闭（self.bankSwitch = false）

最后，在页面注销前，将点击事件给移除

 mounted() {
  document.addEventListener("click", this.bodyCloseMenus);
 },
 methods:{
 bodyCloseMenus(e) {
   let self = this;
   if (this.$refs.main && !this.$refs.main.contains(e.target)) {
    if (self.bankSwitch == true){
     self.bankSwitch = false;
    }
   }
  },
beforeDestroy() {
  document.removeEventListener("click", this.bodyCloseMenus);
 },

2.第二种做法

首页在外层容器里面定义一个阻止冒泡事件，即@click.stop,当bankSwitch为true的时候，弹窗出现

<div class="selectedBorder" @click.stop>
	<div class="bankItem" v-if="bankSwitch == true">
		你好我是弹窗里面的内容部分
 	</div>
</div>

所触发的事件如下：

首页，先在全局创建一个点击事件:bodyCloseMenus

事件作用：当弹窗出现的时候（self.bankSwitch == true），点击空白区域将弹窗关闭（self.bankSwitch = false）

最后，在页面注销前，将点击事件给移除

 mounted() {
  document.addEventListener("click", this.bodyCloseMenus);
 },
 methods:{
 bodyCloseMenus(e) {
   let self = this;
    if (self.bankSwitch == true){
     self.bankSwitch = false;
    }
  },
beforeDestroy() {
  document.removeEventListener("click", this.bodyCloseMenus);
 },

以上就是vue中实现点击空白区域关闭弹窗的两种方法的详细内容，更多关于vue 点击空白区域关闭弹窗的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue中使用element ui的弹窗与echarts之间的问题详解

    今天项目中有个需求,就是在页面中点击一个图标,弹出一个抽屉式的弹窗(弹窗是element UI的抽屉),弹窗里边是echarts呈现的数据,当我直接用echarts的时候,报错dom没有获取到: 这就陷入疑惑,平时都是这样获取的,怎么今天就不行了呢,搜索了很多答案之后才知道,在刚进入页面的时候抽屉是关闭的,那echarts不进行获取dom,当点击抽屉出来的时候,有个opened事件,在这个事件里边进行echarts的初始化,执行数据: <el-drawer title="分析图表"

  • vue打开子组件弹窗都刷新功能的实现

    vue如何一打开子组件弹窗都刷新? 在父页面中给子组件同时绑定:visible.sync和v-if :visible.sync="paramAddDialog" v-if="paramAddDialog" 整体代码: <el-dialog title="绑定其他更多的账户" width="1200px" align="center" :visible.sync="paramAddDialog

  • vue实现点击按钮“查看详情”弹窗展示详情列表操作

    html: <template> <div> <Modal v-model="classStatus" width="900" title="详情:" :styles="{top: '80px'}"> <Table stripe class="task-table" :columns="columnsName4" :data="task

  • Vue解决移动端弹窗滚动穿透问题

    Vue解决移动端弹窗滚动穿透问题

    一.问题描述 在移动端的H5页面中,我们经常会遇到 "点击按钮-->弹窗-->选择选项" 这样的场景.而在选项过多出现滚动条时,滚动滚动条至容器的底部或者顶部.再往上或往下拖动滚动条时,滚动动作会出现穿透,这时候底部的body也会一起滚动. 问题总结:内容在滚动到容器的顶部或者底部时,再向上或向下 强行滚动 ,则出现滚动穿透 二.解决方案思考 参考了网上一大堆的解决方法,大可分为三类方法.经过认真的思考和分析,个人的总结如下: 使用js去控制和改变css 1. 弹窗出现 1

  • Vue自定义全局弹窗组件操作

    写在前面 页面中会有很多时候需要弹窗提示,我们可以写一个弹窗组件,但是如果每个页面都引入这个组件,太麻烦了,所以我们将它变成全局组件,需要用的时候直接通过JS调用即可,不需要在每个页面引入了 效果图 弹窗组件 新建一个弹窗的组件--popup.vue <template> <transition name='fade'> <!-- 蒙版 --> <div class="mask" v-if="show" @touchmove

  • vue实现抽屉弹窗效果

    vue实现抽屉弹窗效果

    本文实例为大家分享了vue实现抽屉弹窗效果的具体代码,供大家参考,具体内容如下 以下代码比较简单.主要就是实现 侧边弹窗而且不会影响页面操作的方式,求点赞!!!不多说直接贴代码. <template> <div> <div :class='{"itemCount":true,"leftT":!leftShow,"left":leftShow}'>//这种写法是动态获取样式 <div style="

  • 使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部

    具体代码如下所示: <template> <div> <table> <tr v-for="item in tableData" :value="item.value" :key="item"> <td> <div> <template> {{item.id}} </template> </div> </td> <td&g

  • Vue v-model组件封装(类似弹窗组件)

    v-model是vue的一个语法糖,限制在input和textarea等这些表单元素中,官网所给的例子也是仅限于表单组件 Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: ` <input type="checkbox" v-bind:checked="checked" v-on

  • vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)

    [注]:popstate 事件 a.当活动历史记录条目更改时,将触发popstate事件. b.如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对history.replaceState()的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本. c.需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件. d.只有在做出浏览器动作时,才会触发该事件,如用

  • Vue中关闭弹窗组件时销毁并隐藏操作

    背景:在dialog弹窗组件中执行mounted钩子,将数据初始化,等取消关闭弹窗后,发现mounted钩子不执行 原因:在vue的生命周期中,在页面初始化的时候mounted只会执行一次,关闭弹窗页面并没有销毁,所以不会再次执行 <select-experience-group :trialMoneyRecordID=trialMoneyRecordID :showExperienceGroup='showExperienceGroup' @closeCover="handleExper

  • vue实现表单未编辑或未保存离开弹窗提示功能

    说明 UI组件是使用 Quasar Framework. 最近做一个表单弹出框,表单保存提交,但是,产品提出,用户不保存,而关闭弹出框时,要给出一个弹窗提示.这个功能,可以用watch监听表单数据.当数据表单发生变化,用户点击了关闭按钮,则根据监听结果来判断用户输入或编辑了数据,进而出现弹窗提示,让用户选择是否离开:当数据没发生变化,则不必提示. 确认离开提示框 实现效果 先实现一个确认离开提示框,效果如下: 实现代码: <template> <div> <q-dialog

随机推荐