vue项目点击其他区域关闭弹层

最新推荐文章于 2024-06-14 10:05:51 发布
最新推荐文章于 2024-06-14 10:05:51 发布
阅读量587 收藏
点赞数
分类专栏： 前端埋坑之路-前端技术 文章标签： vue.js 其他 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u011565547/article/details/121162735
版权
本文介绍了一种使用Vue.js实现的功能：当用户点击页面上非特定（如：person、nickname、triangle_top、closebtn、nav-selcet-area）类名的元素时，自动关闭弹层。通过监听document的点击事件，判断点击目标的class属性，从而控制弹层的显示状态。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

document.addEventListener('click',function(e){

        if(e.target.className != 'person' && e.target.className  != 'nickname'  && e.target.className  != 'triangle triangle_top'  && e.target.className  != 'closebtn' && e.target.className  != 'nav-selcet-area'){  

            console.log(that.showRtNavShow,'that.showRtNavShow');

            that.showRtNavShow = false;

            that.triangleTurn = false;

        }

    });

person,nickname ,triangle triangle_top,closebtn,nav-selcet-area等为当前点击的元素class 

【Vue项目实战】vue.js2.5 饿了么APP（1）概述+项目准备
小陈的博客
05-12 4307
一、概述 1. 项目简介 使用vue.js vue是当前最火的MVVM框架，（优点：轻量、简洁、高效、数据驱动、组件化） 本项目做的是：高仿上线外卖APP商家模块 开发过程：需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译打包 以线上生产环境来开发：代码开发及测试环节：UI标注完美还原设计图、以真实外卖APP数据做演示，以保证代码无兼容性问题。 代码规范： （1）架构设计；（2）组件抽象；（3）模块拆分；（4）代码风格统一；（5）JS变量命名规范；（6）CSS代码规范；致力于编写高可维护，
ElementUI+Vue 解决在使用el-dialog时，点击el-dialog外的其他区域会导致该对话框关闭
weixin_41697323的博客
12-03 5237
需求描述 今天，在做Element+Vue项目时遇到一个需求：甲方要求在Dialog打开状态下，点击该Dialog以外的区域会导致该Dialog关闭；正确的状态应该是只有在点击关闭按钮，或者是Dialog内的其他操作性按钮才能使得Dialog的状态变为关闭。 弹窗关闭后还显示一层遮罩层，设置append-to-body即可 问题分析 之所以会产生这种问题，是因为elementUi在...
ElementUI+Vue 解决在使用el-dialog时，点击el-dialog外的其他区域会导致该对话框关闭。
qq_34169240的博客
11-21 4249
今天，在做Element+Vue项目时遇到一个需求：甲方要求在Dialog打开状态下，点击该Dialog以外的区域会导致该Dialog关闭；正确的状态应该是只有在点击关闭按钮，或者是Dialog内的其他操作性按钮才能使得Dialog的状态变为关闭。
vue 点击其他区域关闭自定义div操作
11-20
方法一： 在外层div添加事件 @click=”closeSel” html method closeSel(event){ var currentCli = document.getElementById("sellineName"); if(currentCli ){ if(!currentCli.contains(event.target)){ //点击到了id为sellineName以外的区域，隐藏下拉框 this.listLineUl = false; } } } 方法二、element.addEventListener(eve
Vue 点击其他地方关闭弹窗
菜虚鲲的博客
11-18 2262
Vue 点击其他地方关闭弹窗 <!doctype html> <html lang="en"> <head> <title>Document</title> <script src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script> <style> #box { position: fi
vue中点击其他区域，关闭当前弹窗
weixin_38881784的博客
07-12 6321
vue中点击其他区域，关闭当前弹窗
Vue点击其他区域关闭弹窗
m0_46961166的博客
01-22 1273
【代码】Vue点击其他区域关闭弹窗。
vue点击网页其他空白区域关闭弹窗
qinnzheng
11-30 2086
阻止冒泡事件
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
12-29
vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意扩展。 v-if 是直接删除dom节点, 就是这个div就不存在了 v-show 是控制dom的...
在vue中实现点击选择框阻止弹出层消失的方法
10-18
另一个场景是，当用户点击按钮显示弹出层后，希望点击弹出层外部区域关闭弹出层。这可以通过在父级元素上监听`click`事件来实现： ```html <button @click.stop="unshow">toggle ``` 然而，由于`...
js 点击页面其他地方关闭弹出层(示例代码)
12-08
代码如下:<html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>无标题文档</title> <style type=”text/css”> <!– *{font-size:12px;font-family:Verdana, Geneva, sans-serif;line-height:14px} a{color:#039} a:hover{color:#f60} .pop{position:absolute;left:40%;top:40%;width:300px;h
vue中点击屏幕其他区域关闭自定义div弹出框
前端队长Daotin
12-06 1223
直接上代码： mounted: function () { let that = this; $(document).on('click', function (e) { let dom = $('.myDiv')[0]; // 自定义div的class if (dom) { // 如果点击的区域不在自定义dom范...
Vue之点击弹窗之外的任意位置关闭弹窗
周金鱼啊
11-06 3199
//弹窗 <divclass="card"v-show="treeRightClick"id="menu"></div> mounted() { //点击任意位置关闭区域弹窗 document.addEventListener('click',(e) => { //获取弹窗对象 const userCon = document.getElementById('menu'); //判断弹窗对象中是否包含点击对象 if(userC...
vue指令-点击其他区域关闭dom
weixin_47813845的博客
03-20 409
【代码】vue指令-点击其他区域关闭dom。
vue.js点击弹窗以外的区域关闭弹窗
认定的总要想办法去完成。
11-26 3000
点击弹窗外的区域关闭弹窗 代码结构 html: <div class="publish_mask_popup" @click="hideMaskPopup" v-show="showMaskPopup"> <div class="mask_popup"> 内容代码..... </div> </div> js: data(){ showMaskPopup:false }, methods: { hideMaskPopup(e)
Vue 实现点击弹窗以外的地方关闭弹窗
GhostUncledrew-blogs
04-16 7066
Vue实现点击弹窗以外的地方关闭弹窗 <template> <div class="test" @click="cancelPop($event)"> <!-- 打开弹窗代码区域 --> <div class="icon" @click.prevent.stop="showPop = !showPop"> <i clas...
vue设置点击自身以外其他区域关闭列表
最新发布
m178398家里有只小肥猫
06-14 1255
下面的例子是 设置点击列表 其他区域关闭列表。
vue组件弹框点击其他区域弹框关闭
Y_soon_start的博客
03-17 765
点击bigbox盒子之外的区域关闭该弹框。记得beforeDestroy()删除click事件 removeEventListener。方法返回一个布尔值，表示一个节点是否是给定节点的后代，即该节点本身、其直接子节点（contains(otherNode） otherNoder 是要测的节点。备注：otherNoder不是可选的，但是可以设置为null。接口的 contains()）、子节点的直接子节点等。
封装技术在layer3弹层中的应用与优化
- 掌握弹层的基本构成，包括触发元素、遮罩层、内容区域和关闭按钮等 4. **编程实践** - 理解标题中的“layer的弹层各类封装，简单好用”说明该文件可能包含一套封装好的弹层组件或函数库 - 掌握如何在项目中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

做个有准备的人

受益虽浅以资鼓励无限

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值