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标签上即可,希望这个小技巧能帮助到您~

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

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

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

相关文章

Elasticsearch 性能调优基础知识

Elastic Stack 已成为监控任何环境或应用程序的实际解决方案。 从日志、指标和正常运行时间到性能监控甚至安全&#xff0c;Elastic Stack 已成为满足几乎所有监控需求的一体化解决方案。 Elasticsearch 通过提供强大的分析引擎来处理任何类型的数据&#xff0c;成为这方面的基…

全新Facebook养号指南,怎么做才能不被封号?

最近听很多跨境电商小伙伴们说 Facebook 又被封号了&#xff0c;可能是你的 Facebook 账号还不够稳定&#xff0c;或者说还没有足够的粉丝和互动。如果你想让自己的 Facebook 账号更加稳定&#xff0c;就需要养号。俗话说&#xff0c;一封回到解放前&#xff0c;为什么你明明有…

操作系统重装

一、老毛桃装机 随着时间的推移&#xff0c;笔记本电脑难免会变得越来越慢&#xff0c;甚至出现系统错误和崩溃等问题。这时候&#xff0c;重装系统可能是最好的解决方案。然而&#xff0c;对于大多数人来说&#xff0c;笔记本电脑重装系统可能会让他们感到无从下手。不要担心&…

软件工程--设计工程--学习笔记(软件设计原则、软件质量属性设计、架构风格......)

软件设计在软件工程中处于技术核心&#xff0c;其目的是把需求分析模型转变为设计模型&#xff0c;以知道软件的实现&#xff0c;本章讲解软件设计的基本原则和基本实践 本文参考教材&#xff1a;沈备军老师的《软件工程原理》 软件设计概述 软件设计分为两个阶段&#xff0…

读取spring boot项目resource目录下的文件

背景 项目开发过程中&#xff0c;有一些情况下将配置文件放在resource下能简化代码实现和部署时的打包步骤。例如&#xff1a; 项目中使用的数据库升级脚本、初始化脚本。将文件放到resource下&#xff0c;打包在jar包中&#xff0c;不能直接通过File路径读取。下面介绍两种读…

孩子还是有一颗网安梦——Bandit通关教程:Level 16 → Level 17

&#x1f575;️‍♂️ 专栏《解密游戏-Bandit》 &#x1f310; 游戏官网&#xff1a; Bandit游戏 &#x1f3ae; 游戏简介&#xff1a; Bandit游戏专为网络安全初学者设计&#xff0c;通过一系列级别挑战玩家&#xff0c;从Level0开始&#xff0c;逐步学习基础命令行和安全概念…

认识YAML和Propertis

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; 循序渐进学SpringBoot ✨特色专栏&…

深度学习 Day21——J1ResNet-50算法实战与解析

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 文章目录 前言一、我的环境二、代码实现与执行结果1.引入库2.设置GPU&#xff08;如果使用的是CPU可以忽略这步&#xff09;3.导入数据4.查…

Qt中多线程使用案列

Qt中多线程下载大文件 #pragma once#include <QWidget> #include <QPushButton> #include "ThreadPool.h" #include <QProgressBar> #include <QLabel> #include <QHBoxLayout> #include <QVBoxLayout> class MainWindow : pub…

el-table 实现行拖拽排序

element ui 表格实现拖拽排序的功能&#xff0c;可以借助第三方插件Sortablejs来实现。 引入sortablejs npm install sortablejs --save组件中使用 import Sortable from sortablejs;<el-table ref"el-table":data"listData" row-key"id" …

【C++】new 和 delete

目录 一 引言 二 new 三 delete 四 new和delete操作自定义类型 五 operator new与operator delete函数 六 new和delete的实现原理 1 内置类型 2 自定义类型 1 new的原理 2 delete的原理 3 new T[N]的原理 4 delete[]的原理 七 定位new表达式(placement-new) 八 …

如何使用Docker搭建青龙面板并结合内网穿透工具发布至公网可访问

文章目录 一、前期准备本教程环境为&#xff1a;Centos7&#xff0c;可以跑Docker的系统都可以使用。本教程使用Docker部署青龙&#xff0c;如何安装Docker详见&#xff1a; 二、安装青龙面板三、映射本地部署的青龙面板至公网四、使用固定公网地址访问本地部署的青龙面板 正文…

期货高低板(期货价格飘升,市场掀起高低潮流)

什么是期货高低板&#xff1f; 期货是由交易所统一交易的标准化合约&#xff0c;商品的价格是通过供求关系来决定的。高低板则是期货交易中的常见现象&#xff0c;它表示了在交易过程中&#xff0c;价格波动超过了可设定的最高或最低价&#xff0c;于是交易系统便会出现高板或…

​Halcon机器视觉软件学习指南

引言 Halcon是由德国MVTec软件公司开发的一款领先的机器视觉软件&#xff0c;广泛应用于工业检测、图像分析、医疗图像处理等领域。对于大学生和初学者而言&#xff0c;学习Halcon不仅能够提升技术层面的能力&#xff0c;还能够增强未来的就业竞争力。本文将为您提供一个系统的…

Git 储藏(stash)用法

储藏的基本用法 保存当前的更改 1、查看储藏 git stash list2、更改保存到一个储藏中&#xff1a; git stash save "info"其中&#xff0c;“info” 是可选的注释信息&#xff0c;可以简要描述这个储藏的内容。 3、恢复之前保存的更改 可以使用下面的命令将之前…

安全狗云原生安全-云甲·云原生容器安全管理系统

随着云计算的快速发展&#xff0c;容器技术逐渐成为主流。然而&#xff0c;随着容器的普及&#xff0c;安全问题也日益突出。为了解决这一问题&#xff0c;安全狗推出了云原生容器安全管理系统——云甲。 云甲是安全狗云原生安全的重要组成部分&#xff0c;它采用了先进的云原生…

Jenkins 构建环境指南

目录 Delete workspace before build starts&#xff08;常用&#xff09; Use secret text(s) or file(s) &#xff08;常用&#xff09; Add timestamps to the Console Output &#xff08;常用&#xff09; Inspect build log for published build scans Terminate a …

什么是“人机协同”机器学习?

“人机协同”&#xff08;HITL&#xff09;是人工智能的一个分支&#xff0c;它同时利用人类智能和机器智能来创建机器学习模型。在传统的“人机协同”方法中&#xff0c;人们会参与一个良性循环&#xff0c;在其中训练、调整和测试特定算法。通常&#xff0c;它的工作方式如下…

vscode开发python环境配置

前言 vscode作为一款好用的轻量级代码编辑器&#xff0c;不仅支持代码调试&#xff0c;而且还有丰富的插件库&#xff0c;可以说是免费好用&#xff0c;对于初学者来说用来写写python是再合适不过了。下面就推荐几款个人觉得还不错的插件&#xff0c;希望可以帮助大家更好地写…

亚信安慧AntDB:支撑中国广电5G业务的数据库之力

自2019年6月获得5G牌照以来&#xff0c;中国广电积极利用700MHz频谱资源&#xff0c;迅速崛起为第四大运营商&#xff0c;标志着其在数字通信领域取得的巨大成就。通过与中国移动紧密合作&#xff0c;共建共享基站已超过400万座&#xff0c;为实现自主运营和差异化竞争提供了坚…