uniapp-uni-icons组件@click.stop失败解决~

你们好,我是金金金。

image.png

场景

image.png

  • 可以看见我右侧有两个icon,点击的时候 会影响到折叠面板的打开,这让我很是苦恼,然后我使用了@click.stop修饰符阻止事件冒泡

排查

排查之前我先贴一下代码

image.png

  • 报错截图

image.png

可以看到找不到属性stopPropagationuniapp的uni-icons组件这里是不能直接这么写的

造成error的原因

  • @click.stop 不能用在uniapp uni-icons

解决

  • 那我们该如何解决这个问题呢?

很简单的。既然我们知道uniapp这个组件上用不了,那我们在外面包一层view组件,我们把点击事件加到view标签上,这样是不是就可以了呢?代码如下。

<view @click.stop="handlePosition(data)" class="provider-content-right-btn">
    <uni-icons type="map-pin-ellipse" size="25"  />
</view>
<view @click.stop="handleNavigation(data)">
    <uni-icons type="paperplane" size="25" color="blue"  />
</view>
  • 测试一下。没有任何问题,非常nice~

image.png

总结

@click.stop 不能用在uniapp组件uni-icons上,我们在外层包裹一层view标签,将点击事件放在view标签上即可,希望这个小技巧能帮助到您~

  • 编写有误还请大佬指正,万分感谢。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【逆向分析篇】APK逆向脱壳过程

【逆向分析篇】APK逆向脱壳过程 简单写下Android应用&#xff08;APK&#xff09;的逆向脱壳过程—【蘇小沐】 文章目录 【逆向分析篇】APK逆向脱壳过程&#xff08;一&#xff09;Apk的文件结构1、META-INF目录1&#xff09;MANIFEST.MF文件2&#xff09;CERT.SF文件3&#x…

HackTheBox - Medium - Windows - Aero

Aero 这个机器利用了今年比较新的cve&#xff0c;关于windows11的漏洞&#xff0c;类似于lnk、scf&#xff0c;但这个危害更高&#xff0c;通过易受攻击的windows11 利用theme、msstyles来实现RCE. Aero 是一台中等难度的 Windows 机器&#xff0c;最近有两个 CVE&#xff1a;…

手把手教你创建一个实时互动的AI数字人直播间!

数字人是什么&#xff1f;数字人是利用人工智能技术实现与真人直播形象的1:1克隆&#xff0c;即克隆出一个数字化的你自己&#xff0c;包括你的形象、表情、动作和声音都会被克隆下来&#xff0c;让你能够拥有接近真人的表现力。 1.首先您需要独立部署青否数字人SaaS系统&#…

2023 英特尔On技术创新大会直播 | 窥探未来科技的边界

2023 英特尔On技术创新大会直播 | 窥探未来科技的边界 写在最前面观后感其他有趣的专题课程 写在最前面 嘿&#xff0c;你是不是对科技和创新充满好奇&#xff1f;2023 英特尔 On 技术创新大会线上活动邀请你一起探索最前沿的科技世界&#xff01; 这不仅是一场普通的聚会&…

关于“Python”的核心知识点整理大全31

目录 12.4.2 在屏幕上绘制飞船 alien_invasion.py ​编辑12.5 重构&#xff1a;模块 game_functions 12.5.1 函数 check_events() game_functions.py alien_invasion.py 12.5.2 函数 update_screen() game_functions.py alien_invasion.py 12.6 驾驶飞船 12.6.1 响应…

CVE-2023-33246 RocketMQ RCE漏洞

一、RocketMQ简介 RocketMQ是一款纯java、分布式、队列模型的开源消息中间件&#xff0c;主要用于在分布式系统中进行异步消息传递&#xff0c;支持事务消息、顺序消息、批量消息、定时消息、消息回溯等功能。 RocketMQ有四个核心组成部分&#xff1a; NameServer&#xff1…

HTML5刷题笔记

在 HTML5 中&#xff0c;onblur 和 onfocus 是&#xff1a;事件属性 onblur 和 onfocus 属于焦点事件&#xff1a; onblur&#xff1a;失去焦点 onfocus&#xff1a;获取焦点 HTML5事件window 事件属性 针对 window 对象触发的事件&#xff1a; onafterprint script 文档…

数据结构课程设计

计算机科学与技术系 《数据结构课程设计》评分表 设计题目 39. 如下图所示&#xff0c;编写可视化算法将从顶点v能到达的最短路径长度为k的所有顶 点标记为红色&#xff08;最短路径以路径上的边数计算&#xff09;。 成绩 课 程 设 计 主 要 内 容 内容编写可视化算…

《网络设备配置与管理》综合训练,华为ensp测试,MSTP\VRRP\OSPF\RIP\BGP\路由引入

1.设备基础信息配置 &#xff08;1&#xff09;根据表2IPv4地址分配表&#xff0c;修订所有设备名称。 &#xff08;2&#xff09;根据公司网络规划&#xff0c;在所有交换机上创建VLAN10、VLAN20。为了保证不同交换机上的同一个VLAN的成员之间能够相互通信&#xff0c;需要配…

同一个数组中对象去重

封装方法 fn1 (tempArr) {this.echartList.map(item > {for (let i 0; i < item.data.length; i) {for (let j i 1; j < item.data.length; j) {if (item.data[i].deviceId item.data[j].deviceId && item.data[i].time item.data[j].time && it…

[网络安全]在win2000虚拟机上创建隐藏账户

手工创建隐藏账户 1.你需要一台win2000 2.winR->cmd->regedt32 增加HEY_LOACL_MACHINE\SAM\的权限,标头有安全&#xff0c;点击&#xff0c;然后勾选 3.新建账号&#xff0c;例如HiddenAccount$($表示在命令行下不现实此用户&#xff09; net user HiddenAccount$ 123456…

Linux:ELF 可执行文件的解析与其加载的原理

文章目录 ELF 可执行文件需要的前置知识ELF 可执行文件的程序头部表 加载可执行目标文件QA加载器如何工作&#xff1f; 参考 ELF 可执行文件 我们已经看到链接器如何将多个目标文件合并成一个可执行目标文件。我们的 C程序&#xff0c;开始时是一组 ASCII 文本文件&#xff0c…

实验4.3 动态路由RIPv2协议的配置

实验4.3 动态路由RIPv2协议的配置 一、任务描述二、任务分析三、具体要求四、实验拓扑五、任务实施1.配置交换机和路由器的接口的IP地址等参数。2.配置动态路由RIPv2协议&#xff0c;实现全网互通。 六、任务验收七、任务小结八、知识链接1&#xff0e;RIP协议简介2&#xff0e…

Linux开发工具——vim篇

vim开发工具的使用 文章目录 vim开发工具的使用认识vimvim常用三种模式vim正常模式命令集模式切换移动光标删除文字赋值替换撤销上一次操作更改跳到指定的行 vim末行模式命令集列出行号跳到文件中的某一行&#xff1a;保存文件离开vim查找字符&#xff1a; 总结题外话&#xff…

spring之面向切面:AOP(2)

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

递归算法:二叉树前序、中序、后序遍历解析与递归思想深度剖析

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《linux深造日志》 《高效算法》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 一、二叉树的遍历1.1 链式结构二叉树的创建1.1 二叉树结构图 二、 前序遍历代码演示&#xff1a;2.1 前序遍历递…

万兆网络之疑难杂症(二)

症状&#xff1a;测线仪8芯全亮&#xff0c;网速只有百兆 某台计算机测速发现只有90多M/s速度&#xff0c;关于iperf测速可以参考之前的文章 万兆网络之线路测速 Win11系统查看网络属性为1000Mbps&#xff0c;还是扯皮的装修方&#xff0c;4个工位只布了2条线&#xff0c;还…

智慧安防视频监控EasyCVR如何通过回调接口向第三方平台推送RTSP视频通道离线通知

安防视频监控系统EasyCVR能在局域网、公网、专网等复杂的网络环境中部署&#xff0c;可支持4G、5G、WiFi、有线等方式进行视频的接入与传输、处理和分发。平台能将接入的视频流进行汇聚、转码、多格式输出和分发&#xff0c;具体包括&#xff1a;RTMP、RTSP、HTTP-FLV、WebSock…

海康威视IP网络对讲广播系统命令执行漏洞(CVE-2023-6895)

漏洞介绍 海康威视IP网络对讲广播系统采用领先的IPAudio™技术,将音频信号以数据包形式在局域网和广域网上进行传送,是一套纯数字传输系统。 Hikvision Intercom Broadcasting System 3.0.3_20201113_RELEASE(HIK)版本存在操作系统命令注入漏洞&#xff0c;该漏洞源于文件/ph…

Linux网络编程(一):网络基础(下)

参考引用 UNIX 环境高级编程 (第3版)黑马程序员-Linux 网络编程 1. 协议的概念 1.1 什么是协议 从应用的角度出发&#xff0c;协议可理解为 “规则”&#xff0c;是数据传输和数据解释的规则 假设&#xff0c;A、B双方欲传输文件&#xff0c;规定&#xff1a; 第一次&#xff…