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

news2024/11/22 9:10:05

你们好,我是金金金。

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.coloradmin.cn/o/1326368.html

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

相关文章

抖音小程序开发入门

注册账号 公司和个人的都是在同一个地方注册&#xff0c;个人开发者勾选 个人开发即可 https://developer.open-douyin.com/ 在企业号&#xff0c;账号中心&#xff0c;直接邀请开发人员 发出邀请之后&#xff0c;需要被邀请人登录账号接收 调试 开发人员调试应用&#xf…

软件设计模式:六大设计原则

文章目录 前言一、开闭原则二、里氏替换原则三、依赖倒转原则四、接口隔离五、迪米特法则六、合成复用原则总结 前言 在软件开发中&#xff0c;为了提高软件系统的可维护性和可复用性&#xff0c;增加软件的可扩展性和灵活性&#xff0c;程序员要尽量根据6条原则来开发程序&am…

宝塔面板安装MySQL数据库并通过内网穿透工具实现公网远程访问

文章目录 前言1.Mysql 服务安装2.创建数据库3.安装 cpolar3.2 创建 HTTP 隧道 4.远程连接5.固定 TCP 地址5.1 保留一个固定的公网 TCP 端口地址5.2 配置固定公网 TCP 端口地址 前言 宝塔面板的简易操作性,使得运维难度降低,简化了 Linux 命令行进行繁琐的配置,下面简单几步,通…

关于研发费用资本化和费用化的理解以及在利润表与资产负债表之间的勾稽关系

关注WX公众号&#xff1a; commindtech77&#xff0c; 获得数据资产相关白皮书下载地址 回复关键字&#xff1a;推荐系统 下载《新闻资讯个性化推荐系统源码》 回复关键字&#xff1a;数据资源入表白皮书 下载《2023年数据资源入表白皮书》 原文链接&#xff1a; 关于研发…

python 常用知识点

文章目录 Python 概述内置对象、运算符、表达式、关键字Python 序列结构 Python 概述 标准库与拓展库中对象的导入与使用 &#xff08;1&#xff09;import 模块名 [ as 别名 ] //使用时用’模块名.对象名’的形式访问 &#xff08;2&#xff09;from 模块名 import 对象名 [ a…

Seata中AT模式的实现原理01-TM开启全局事务

什么是AT模式 AT模式是一种无侵入的分布式事务解决方案 保证最终一致性 是Seata默认的方式&#xff0c;在AT模式下&#xff0c;用户只需要关注自己的“业务SQL”,用户的“业务SQL”作为一阶段&#xff0c;Seata框架会自动的生成事务的二阶段提交和回滚 AT模式的机制 AT模式其…

生活中的物理2——人类迷惑行为(用笔扎手)

1实验 材料 笔、手 实验 1、先用手轻轻碰一下笔尖&#xff08;未成年人须家长监护&#xff09; 2、再用另一只手碰碰笔尾 你发现了什么&#xff1f;&#xff1f; 2发现 你会发现碰笔尖的手明显比碰笔尾的手更痛 你想想为什么 3原理 压强f/s 笔尖的面积明显比笔尾的小 …

AI技术迅猛发展,视频智能化给人类带来了哪些便利?

随着AI技术的迅猛发展&#xff0c;视频智能化也逐渐普及。在我们常见的生产工作和日常生活中&#xff0c;视频智能化都为人类带来了许多便利。今天小编就和大家探讨一下智能化监控带来了哪些便利。 1、安全监控 视频智能化可以实现智能安防监控&#xff0c;例如智慧安防系统Ea…

FLASH闪存的读取、擦除、编程

一、stm32寄存器地址介绍 二、FLASH简介 &#xff08;1&#xff09;STM32F1系列的FLASH包含程序存储器、系统存储器和选项字节三个部分&#xff0c;通过闪存存储器接口可以对程序存储器和选项字节进行擦除和编程 &#xff08;2&#xff09; 读写FLASH的用途&#xff1a;利用程…

Android Studio打包有哪些优势

大家好&#xff0c;现在移动应用程序的快速发展&#xff0c;开发者需要一个强大又可靠的开发环境来创建和打包高质量的 Android 应用程序。Android Studio 是一款由 Google 官方开发的 Android 应用程序开发环境&#xff0c;提供了许多的优势和便利&#xff0c;那究竟都有哪些优…

LeetCode刷题--- 括号生成

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归算法题 http://t.csdnimg.cn/yUl2I 【C】 http://t.csdnimg.cn/6AbpV 数据结构与算法 http://t.csdnimg.cn/hKh2l 前言&#xff1a;这个专栏主要讲述递归递归、搜…

【自用】Ubuntu20.4从Vivado到ddr200t运行HelloWorld

【自用】Ubuntu20.4新系统从输入法到ddr200t运行HelloWorld 一、编辑bashrc二、Vivado2022.2安装三、编译蜂鸟E203自测样例1. 环境准备2. 下载e203_hbirdv2工程文件3. 尝试编译自测案例1. 安装RISC-V GNU工具链2. 编译测试样例 4. 用vivado为FPGA生成mcs文件1.准备RTL2.生成bit…

界面控件DevExpress WPF Dock组件,轻松创建类Visual Studio窗口界面!

本文主要为大家介绍DevExpress WPF控件中的Dock组件&#xff0c;它能帮助用户轻松创还能受Microsoft Visual Studio启发的Dock窗口界面。 P.S&#xff1a;DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress …

社交网络分析(汇总)

这里写自定义目录标题 写在最前面社交网络分析系列文章汇总目录 提纲问题一、社交网络相关定义和概念提纲问题1. 社交网络、社交网络分析&#xff1b;2. 六度分隔理论、贝肯数、顿巴数&#xff1b;3. 网络中的数学方法&#xff1a;马尔科夫过程和马尔科夫链、平均场理论、自组织…

EasyUiAutotest 项目目录设置及说明

一、前置说明 清晰的项目目录结构非常重要的&#xff0c;它能够为项目提供结构化、易维护、易理解的环境。 二、目录设置及说明 项目目录结构如下&#xff1a; EasyUiAutotest ├───atme # me&#xff0c;供个人使用的目录&#xff0c;与整体项目无关&#xff0c;存…

ubuntu 20.04安装一系列软件

1&#xff09;安装下载的包的指令&#xff1a; sudo dpkg -i xxx.deb 2&#xff09;通用指令&#xff1a; sudo apt-get install xxxx 3&#xff09;更新和升级软件包&#xff08;遇到Unable to locate packge等问题先尝试这个指令&#xff09;&#xff1a; sudo apt-get up…

如何取消iCloud订阅,这里有非常明细的步骤

iCloud是存储文件、照片和备份的好方法&#xff0c;但每个用户获得的5GB免费iCloud存储空间往往不够。如果你使用iCloud Drive在设备之间存储和传输大量文件&#xff0c;你可能需要购买更多的iCloud存储。我们将向你展示如何在iPhone设置中更改iCloud存储计划或取消iCloud订阅。…

java8流库之Stream.iterate

简介 java.util.stream.Stream 下共有两个 iterate iterate(T seed, final UnaryOperator<T> f)iterate(T seed, Predicate<? super T> hasNext, UnaryOperator<T> f) 该方法产生一个无限流&#xff0c;它的元素包含seed&#xff0c;在seed上调用f产生的…

跟着野火学FreeRTOS:第一段(空闲任务与阻塞延时的实现)

在前一小节中&#xff0c;任务操作里面的延时就是直接让 C P U CPU CPU干等着&#xff0c;啥也不干&#xff0c;这样会极大的浪费 C P U CPU CPU的资源。这一小节即将要讲到的阻塞延时就是当任务有延时需要的时候让 C P U CPU CPU不要干等着&#xff0c;而是去执行其它的任务&a…

取消paypal免密支付绑定平台

在设置支付中-》自动支付-》取消特定平台即可。