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;成为这方面的基…

react+ts父子组件传值

父传子 ①在父组件中定义const nameFromParent: string "John"; ②从父组件传递给子组件<ChildComponent name{nameFromParent} /> ③在子组件中定义属性的类型interface ChildProps { age: number;} ④如果数据多需要解构再使用const { name,... } props;&a…

1316:【例4.6】数的计数(Noip2001) 代码+解析

1316&#xff1a;【例4.6】数的计数(Noip2001) 【题目描述】 我们要求找出具有下列性质数的个数&#xff08;包括输入的自然数n &#xff09;。先输入一个自然数n(n≤1000)&#xff0c;然后对此自然数按照如下方法进行处理&#xff1a;不作任何处理&#xff1b;在它的左边加上一…

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

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

Servlet 3.0异步特性 - `AsyncContext`使用

概述 在传统的Servlet模型中&#xff0c;每个请求都会在一个独立的线程中进行处理&#xff0c;直到处理完成后才会返回响应给客户端。然而&#xff0c;有些场景下&#xff0c;处理请求可能需要较长时间&#xff0c;导致线程资源的浪费。Servlet 3.0引入了异步特性&#xff0c;…

操作系统重装

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

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

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

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

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

ConditionalOnProperty 注解的概述

功能说明 ConditionalOnProperty 是 Spring Boot 中用于条件化配置的一个注解&#xff0c;它允许基于环境属性(environment properties)的值来控制某个配置类或者 bean 的创建。 应用场景 功能开关&#xff1a;可以作为功能开关使用&#xff0c;根据配置文件中的属性值决定是…

Latex编译出来的pdf文件缺少参考文献和交叉引用

参考文件通常需要在首次编译后&#xff0c;再次编译添加 依次执行下面的命令即可&#xff1a; xelatex main.tex main.tex为需要编译的主tex文件 biber mainxelatex main.tex 如果编译过程中遇到错误&#xff0c;请删除所有辅助文件和已打开的pdf文件后重试 辅助文件包括&#…

opencv 传统图像识别检测

opencv 传统图像识别检测 一、图像相识度检测 读取图像哈希列表数据 pash计算结构&#xff0c;hash距离低于该值的都判定为相似图像 import cv2 import shutil import numpy as np import osdef main(hashPath, savePath, pashThre):# 读取图像哈希列表数据hashList np.loa…

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

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

C语言 字符串处理相关函数大汇总之(11~15)

11&#xff0c;strtok函数,用于将字符串按照指定的分隔符进行分割。 strtok 函数在首次调用时需要传入待分割的字符串和分隔符&#xff0c;之后的连续调用只需要传入 NULL 作为第一个参数即可继续上一次的分割。函数原型如下&#xff1a; char *strtok(char *str, const char…

rust热门前后端框架

Rust 生态系统中有一些开源的热门框架可用于开发前后端应用程序。以下是几个广受欢迎的 Rust 框架&#xff1a; 1. **Rocket&#xff1a;** Rocket 是一个简单、易用且高度可定制的 Web 框架&#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; 二、安装青龙面板三、映射本地部署的青龙面板至公网四、使用固定公网地址访问本地部署的青龙面板 正文…