【Uniapp,Vue】阻止父元素事件覆盖子元素事件

news/2024/12/21 6:07:37/

有个需求,点击一个元素,让弹出框显示,点击弹出框以外的区域,就关闭弹出框,如下代码所示。
但是这样有个问题,就是当弹出框显示以后,点击弹出框的区域也会触发父元素的点击事件,使得ifshow=false

<view @click="ifshow=false"><view @click="ifshow=true">点击显示弹出框</view><view v-if="ifshow">弹出框</view>
</view>

在这里插入图片描述

解决方法: 在子组件事件加个修饰stop,就会相互隔绝父子事件

<view @click="ifshow=false"><view @click.stop="ifshow=true">点击显示弹出框</view><view v-if="ifshow">弹出框</view>
</view>

在这里插入图片描述


http://www.ppmy.cn/news/973825.html

相关文章

JavaWeb_LeadNews_Day3-图片管理, 文章管理

JavaWeb_LeadNews_Day3-图片管理, 文章管理 图片管理图片上传实现思路获取用户信息将图片上传至minio 图片列表 文章管理频道列表查询文章列表查询文章发布实现思路具体代码 来源 图片管理 图片上传 实现思路 在GateWay解析前端请求, 获取用户信息, 存储在header中在Interce…

Spring Data Redis操作Redis

在Spring Boot项目中&#xff0c;可以使用Spring Data Redis来简化Redis操作&#xff0c;maven的依赖坐标&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></…

使用Selenium与Chrome DevTools交互

目录 为什么我们应该自动化Chrome开发工具&#xff1f; 如何打开Chrome DevTools 元素 控制台 源代码 网络 应用 安全 性能 如何使用Selenium使用chrome Devtools实现自动化&#xff1f; 收集性能指标 使用Selenium DevTols捕获控制台日志 模拟位置 网络节流 捕…

chatGPT详细的模型原理

ChatGPT是一种由OpenAI训练的大型语言模型&#xff0c;它基于Transformer架构&#xff0c;实现了以文本为输入&#xff0c;以文本为输出的端到端模型。ChatGPT通过自注意力机制&#xff0c;能够捕捉语言中的长期依赖关系&#xff0c;并且它还能够记住上下文信息&#xff0c;从而…

Docker中的网络

文章目录 一、Docker 网络1.1 Docker 网络实现原理1.2 查看容器的输出和日志信息Docker 的网络模式 二、资源控制2.1 CPU 资源控制2.2 对内存使用的限制 一、Docker 网络 1.1 Docker 网络实现原理 Docker使用Linux桥接&#xff0c;在宿主机虚拟一个Docker容器网桥(docker0)&a…

【Zerotier】通过docker自建PLANET服务器

在如今全球互联的时代&#xff0c;我们对于互联网的依赖程度越来越高。然而&#xff0c;传统的网络连接方式在某些情况下可能会受到一些限制&#xff0c;例如局域网的范围限制、防火墙的阻断或者设备所处的多层NAT等。但是&#xff0c;现在有一个名为ZeroTier的工具出现了&…

内存的五大分区(自用水文)

1、堆区&#xff08;heap&#xff09;——由程序员分配和释放&#xff0c; 若程序员不释放&#xff0c;程序结束时一般由操作系统回收。注意它与数据结构中的堆是两回事 2、栈区&#xff08;stack&#xff09;——由编译器自动分配释放 &#xff0c;存放函数的参数值&#xff0…

Matlab求解基于RRT算法的自定义垛型的路径避障

目录 背景 1 RRT搜索算法 2 基于Matlab的RRT搜索算法 3 基于Matlab的自定义垛型绘制 4 基于RRT算法的自定义垛型的路径避障 背景 在码垛机械臂路径规划过程中&#xff0c;需要根据现有箱子的码垛状态&#xff0c;给出下一个箱子的最佳码放无碰撞路径。RRT 快速搜索随机…