uniapp中@click或者@tap多层嵌套的问题解决方法

news2024/11/17 10:43:48

我们在开发页面的过程中。例如要设计一个九宫格的相册,并且加上删除上传图片和点击图片后预览图片大图的功能例如下图的演示功能。

在这里插入图片描述点击图片后显示大图预览图片,点击x号后要删除掉当前的图片,那么我们设计的时候如果我们代码写成如下的格式

<view class="xiangce">
				<view class="xiangce-item"  v-for="(item,key) in imglist" :key="key" @click="showimg(item)">
					<view class="jiaobiao" @click="delImg(key)"><u-icon name="close-circle-fill"></u-icon></view>
					<image :src="item" mode="aspectFill"></image>
			    </view>	
</view> 

通过上面我们可以看到我们涉及到了两个点击的操作调用了不同的方法,就会遇到一个问题就是点击外围@click="showimg(item)"是生效的,但是点击@click="delImg(key)"是不生效的,那么我们处理的方式很简单

把内部的@click修改为@click.native.stop

另外我们如果用的@tap则修改为@tap.stop就可以了。

这个仅仅是我自己的一个笔记整体九宫格实现的代码后续整理再发布。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1949533.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【JavaScript】`Map` 数据结构

文章目录 一、Map 的基本概念二、常见操作三、与对象的对比四、实际应用场景 在现代 JavaScript 中&#xff0c;Map 是一种非常重要且强大的数据结构。与传统的对象&#xff08;Object&#xff09;不同&#xff0c;Map 允许您使用各种类型的值作为键&#xff0c;不限于字符串或…

jenkins自动化持续集成

一、持续集成优势 1.1 解放重复劳动 一次设置&#xff0c;多次复用。持续集成任务可以解放集成、测试、部署等重复性劳动&#xff0c;通过自动化任务能够显著提升集成频率。 1.2 更快解决问题 接入持续集成任务后&#xff0c;能够更早地感知变更后效果&#xff0c;及时进入…

『 Linux 』信号的写入与保存

文章目录 信号的发送信号的保存sigset_t 类型与信号集操作函数阻塞信号集(信号屏蔽字)操作函数未决信号集操作函数验证阻塞信号集与未决信号集 信号的发送 $ kill -l1) SIGHUP 2) SIGINT 3) SIGQUIT 4) SIGILL 5) SIGTRAP6) SIGABRT 7) SIGBUS 8) SIGFPE 9) SIGKILL 10)…

sql注入的专项练习 sqlilabs(含代码审计)

在做题之前先复习了数据库的增删改查&#xff0c;然后自己用本地的环境&#xff0c;在自己建的库里面进行了sql语句的测试&#xff0c;主要是回顾了一下sql注入联合注入查询的语句和sql注入的一般做题步骤。 1.获取当前数据库 2.获取数据库中的表 3.获取表中的字段名 一、sql…

Rce漏洞复习(ctfshow29-50)

Rce漏洞简介思维导图 Web29 代码审计&#xff1a; if(!preg_match("/flag/i", $c)){ eval($c); 传参没有flag&#xff08;大小写都没有出现&#xff09; Payload&#xff1a; ?csystem("ls"); ?csystem("tac *lag.php"); Web30 代码…

数据结构——排序大汇总(建议收藏)

这篇文章将为大家详细讲解各大排序的基本思想与实现代码~ 内有动图 首先&#xff0c;我们来看常见的排序有以下几大类&#xff1a; 1.插入排序 插入排序的主要思想是将每个位置的元素插入到前面已具备顺序的数组中 实际中我们玩扑克牌时&#xff0c;就用了插入排序的思想 …

Adobe正通过数字体验改变世界

在当今这个数字化飞速发展的时代&#xff0c;Adobe公司正以其创新的技术和卓越的产品引领着创意设计领域的变革。从Adobe发布的生成式AI工具&#xff08;Adobe Firefly&#xff09;&#xff0c;到Illustrator和Photoshop的新AI功能&#xff0c;再到广受认可的Adobe国际认证&…

【Golang 面试基础题】每日 5 题(七)

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/UWz06 &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏…

opencv入门(四)

文章目录 一、形态学转换1.1 图像腐蚀1.1.1 erode():用于实现对图像的腐蚀操作1.2 图像膨胀1.2.1 dilate():实现对图像的膨胀操作1.3 图像 开\闭运算、梯度运算、顶帽运算、底帽运算1.3.1 morphologyEx():实现对图像的 开\闭运算、梯度运算、顶帽运算、底帽运算一、形态学转…

DATEDIFF()- Date Functions-SQL函数

DATEDIFF&#xff08;&#xff09;- Date Functions DATEDIFF() 函数是一种用于计算日期差异的常见日期函数。 通常用于比较两个日期之间的时间跨度&#xff0c;以便进行日期计算和分析。 语法 大多数数据库中&#xff0c;DATEDIFF() 函数的语法&#xff1a; DATEDIFF(unit,…

C++ | Leetcode C++题解之第278题第一个错误的版本

题目&#xff1a; 题解&#xff1a; class Solution { public:int firstBadVersion(int n) {int left 1, right n;while (left < right) { // 循环直至区间左右端点相同int mid left (right - left) / 2; // 防止计算时溢出if (isBadVersion(mid)) {right mid; // 答案…

MySQL练习05

题目 步骤 触发器 use mydb16_trigger; #使用数据库create table goods( gid char(8) primary key, name varchar(10), price decimal(8,2), num int);create table orders( oid int primary key auto_increment, gid char(10) not null, name varchar(10), price decima…

Pytorch使用教学6-张量的分割与合并

在使用PyTorch时&#xff0c;对张量的分割与合并是不可避免的操作&#xff0c;本节就带大家深刻理解张量的分割与合并。 在开始之前&#xff0c;我们先对张量的维度进行深入理解&#xff1a; t2 torch.zeros((3, 4)) # tensor([[0., 0., 0., 0.], # [0., 0., 0., 0.…

【PyTorch】基于YOLO的多目标检测项目(二)

【PyTorch】基于YOLO的多目标检测项目&#xff08;一&#xff09; 【PyTorch】基于YOLO的多目标检测项目&#xff08;二&#xff09; YOLO-v3网络由跨距为2的卷积层、跳跃连接层和上采样层组成&#xff0c;没有池化层。网络接收一幅416 * 416的图像作为输入&#xff0c;并提供三…

华为网络模拟器eNSP安装部署教程

eNSP是图形化网络仿真平台&#xff0c;该平台通过对真实网络设备的仿真模拟&#xff0c;帮助广大ICT从业者和客户快速熟悉华为数通系列产品&#xff0c;了解并掌握相关产品的操作和配置、提升对企业ICT网络的规划、建设、运维能力&#xff0c;从而帮助企业构建更高效&#xff0…

数据结构 | LinkedList与链表

前言 ArrayList底层使用连续的空间,任意位置(尤其是0位置下标)插入或删除元素时,需要将该位置后序元素 整体 往前或往后搬移,故时间复杂度为O(N). 优点(给定一个下标,可以快速查找到对应的元素,时间复杂度为O(1))增容需要申请新空间,拷贝数据,释放旧空间,会有不小的消耗.增容一…

Linux进程——环境变量之二

文章目录 环境变量查看环境变量获取环境变量main()的第三个参数本地变量全局环境变量内建命令与常规命令 环境变量 查看环境变量 在上一篇文章中我们只说了查看某个环境变量的值&#xff0c;那么如何查看所有的环境变量呢 使用指令env即可 例如 这里我们也不需要全部记住&a…

FastAPI(七十四)实战开发《在线课程学习系统》接口开发-- 删除留言

源码见&#xff1a;"fastapi_study_road-learning_system_online_courses: fastapi框架实战之--在线课程学习系统" 之前文章FastAPI&#xff08;七十三&#xff09;实战开发《在线课程学习系统》接口开发-- 回复留言&#xff0c;那么我们这次分享删除留言接口的开发…

从0开始的STM32HAL库学习9

定时器输入捕获测频率 生成待测信号 配置环境 选择如上图所示 代码修改 在main函数中加入 HAL_TIM_PWM_Start(&htim2,TIM_CHANNEL_1); 测量信号频率 配置环境 如图所示打开TIM3定时器 1. 设置TI1FP1为ResetMode,即清空计数 2. 使用内部时钟 3. 通道 1 设置为输…

手机怎么设置不同的ip地址

在数字化日益深入的今天&#xff0c;智能手机已成为我们生活、工作和学习中不可或缺的设备。然而&#xff0c;随着网络应用的广泛和深入&#xff0c;我们有时需要为手机设置不同的IP地址来满足特定需求。比如&#xff0c;避免网络限制、提高网络安全、或者进行网络测试等。本文…