当前位置: 首页 > news >正文

uview1.0部分机型u-input组件禁用后无法触发click事件

最近,线上的一个 App 收到用户反馈,输入框禁用状态下点击无法拉起模态框。找了一下身边可用机型进行了测试,起初所有机型都没有复现这个问题,突然有一天 Redmi K30S Ultra 出现了异常,点击输入框无法触发点击事件,只有输入框右侧的图标可以触发点击事件。
在这里插入图片描述
接着看了一下 uview 的源码,u-input 组件在 input 组件外套了盒子,外面的盒子确实绑定了 click 事件,我们处理的实际上是 u-input 组件的点击事件而不是 input 组件的点击事件。

<template><viewclass="u-input":class="{'u-input--border': border,'u-input--error': validateState}":style="{padding: `0 ${border ? 20 : 0}rpx`,borderColor: borderColor,textAlign: inputAlign}"@tap.stop="inputClick">……<view class="u-input__right-icon u-flex"><view class="u-input__right-icon__clear u-input__right-icon__item" @tap="onClear" v-if="clearable && value != '' && focused"><u-icon size="32" name="close-circle-fill" color="#c0c4cc"/></view><view class="u-input__right-icon__clear u-input__right-icon__item" v-if="passwordIcon && type == 'password'"><u-icon size="32" :name="!showPassword ? 'eye' : 'eye-fill'" color="#c0c4cc" @click="showPassword = !showPassword"/></view><view class="u-input__right-icon--select u-input__right-icon__item" v-if="type == 'select'" :class="{'u-input__right-icon--select--reverse': selectOpen}"><u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon></view></view></view>
</template><script>
export default {name: 'u-input',……methods: {……inputClick() {this.$emit('click');}}
};
</script>

最终定位到问题是 u-inputclick 事件在内部的 input 组件禁用时,无法正常触发。目前,只是在部分 Android 机型上有这个问题。

所以,在处理类似的交互时可以选择如下方案进行修改:

  • 在禁用状态下,在 u-input 组件右侧添加 icon ,通过 icon 的点击事件拉起模态框
  • u-input 组件顶部添加一个盒子,触发盒子的点击事件拉起模态框

注:input 组件是 uniapp 提供的内置表单组件,是没有点击事件的

相关文章:

uview1.0部分机型u-input组件禁用后无法触发click事件

最近&#xff0c;线上的一个 App 收到用户反馈&#xff0c;输入框禁用状态下点击无法拉起模态框。找了一下身边可用机型进行了测试&#xff0c;起初所有机型都没有复现这个问题&#xff0c;突然有一天 Redmi K30S Ultra 出现了异常&#xff0c;点击输入框无法触发点击事件&…...

Arduino IDE + Esp32 Cam + 实现视频流 + 开发环境部署

1、开发环境 Arduino ide 版本&#xff1a;2.2.1 esp32工具&#xff1a;2.0.5 示例代码 #include "esp_camera.h" #include <WiFi.h>// // WARNING!!! PSRAM IC required for UXGA resolution and high JPEG quality // Ensure ESP32 Wrover Modu…...

Day4力扣打卡

打卡记录 同积元组&#xff08;哈希表 排列组合&#xff09; 链接 思路&#xff1a;用哈希表将数组中出现的两不同数乘积依次记录&#xff0c;将出现两次以上的乘积组通过排列组合计算总情况个数。 class Solution { public:int tupleSameProduct(vector<int>& num…...

Paper Reading:《Consistent-Teacher: 减少半监督目标检测中不一致的伪目标》

目录 简介工作重点方法ASA, adaptive anchor assignmentFAM-3D, 3D feature alignment moduleGMM, Gaussian Mixture Model实施细节 实验与SOTA的比较消融实验 总结 简介 题目&#xff1a;《Consistent-Teacher: Towards Reducing Inconsistent Pseudo-targets in Semi-supervi…...

设计模式:观察者模式(C#、JAVA、JavaScript、C++、Python、Go、PHP)

简介&#xff1a; 观察者模式&#xff0c;它是一种行为型设计模式&#xff0c;它允许一个对象自动通知其依赖者&#xff08;观察者&#xff09;状态的变化。当被观察者的状态发生改变时&#xff0c;它会通知所有的观察者对象&#xff0c;使他们能够及时做出响应。在观察者模式…...

kotling构造函数

Kotlin-继承与构造函数 - 简书 (jianshu.com) Kotlin语言中的继承与构造函数&#xff08;详解&#xff09;_kotlin 继承 构造函数_young螺母的博客-CSDN博客...

SpringMVC - 详解RESTful

文章目录 1. 简介2. RESTful的实现3.HiddenHttpMethodFilter4. RESTful案例1、准备工作2、功能清单3、具体功能&#xff1a;访问首页a>配置view-controllerb>创建页面 4、具体功能&#xff1a;查询所有员工数据a>控制器方法b>创建employee_list.html 5、具体功能&a…...

html表格标签

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body><!--表格table 行 tr 列 td --> <table border"1px"><tr> <!--colsp…...

Node.JS---npm相关

文章目录 前言一、package.json配置项version&#xff1a;1.0.0devDependenciesdependenciespeerDependenciesoptionalDependencies 二、npm命令1、npm config listxmzs使用2、npm installpackage-lock.json作用 3、npm run4、 查看全局安装的可执行文件 npm生命周期npxnpx简介…...

Flutter的Don‘t use ‘BuildContext‘s across async gaps警告解决方法

文章目录 问题有问题的源码 问题原因问题分析Context的含义BuildContext的作用特殊情况 解决方法 问题 Flutter开发中遇到Don’t use BuildContext’s across async gaps警告 有问题的源码 if (await databaseHelper.isDataExist(task.title)) {showDialog(context: context,…...

Nginx 实战教程

本篇博客我会演示日常的工作中&#xff0c;我们是怎么利用nginx部署项目的。我们以部署一套前后分离的项目为本次讲述的内容 一、搭建后端项目 创建一个最简单的springboot项目&#xff1a; 只需要依赖一个web模块即可&#xff1a; 提供一个api接口&#xff0c;可以获取服务端…...

Web自动化——python

文章目录 1.八大元素定位2.元素基本操作3.浏览器常用操作4.获取元素信息的常用方法5.鼠标和键盘相关操作6.元素等待1.隐式等待2.显示等待 7.下拉选择框8.弹出框9.滚动条操作10.frame表单的切换11.多窗口切换12.窗口截图、验证码处理 1.八大元素定位 元素属性定位&#xff1a;id…...

华为OD 整数最小和(100分)【java】A卷+B卷

华为OD统一考试A卷+B卷 新题库说明 你收到的链接上面会标注A卷还是B卷。目前大部分收到的都是B卷。 B卷对应20022部分考题以及新出的题目,A卷对应的是新出的题目。 我将持续更新最新题目 获取更多免费题目可前往夸克网盘下载,请点击以下链接进入: 我用夸克网盘分享了「华为O…...

正则表达式:文本处理中的瑞士军刀

正则表达式是用于提取字符串规律的规则&#xff0c;通过特定语法表达&#xff0c;以匹配符合该规律的字符串。它具有通用性&#xff0c;不仅适用于Python&#xff0c;也可用于其他编程语言。 下面我用Python的re模块来进行实战演示&#xff1a;&#xff08;记得import re&…...

WebSocket 入门案例

目录 WebSocket入门案例WebSocket-server新增项目:添加依赖:yml:启动类&#xff1a; frontend-server前端项目&#xff1a;添加依赖&#xff1a;添加yml&#xff1a;启动类&#xff1a;前端引入JS:前端页面&#xff1a;后端代码&#xff1a;测试&#xff1a; WebSocket 入门案…...

华为OD 最大社交距离(100分)【java】A卷+B卷

华为OD统一考试A卷+B卷 新题库说明 你收到的链接上面会标注A卷还是B卷。目前大部分收到的都是B卷。 B卷对应20022部分考题以及新出的题目,A卷对应的是新出的题目。 我将持续更新最新题目 获取更多免费题目可前往夸克网盘下载,请点击以下链接进入: 我用夸克网盘分享了「华为O…...

Nginx缓存

Nginx缓存 一般情况下系统用到的缓存有三种 服务端缓存&#xff1a;缓存存在后端服务器&#xff0c;如redis 代理缓存&#xff1a;缓存存储在代理服务器或中间件&#xff0c;内容从后端服务器获取&#xff0c;保存在本地 客户端缓存&#xff1a;缓存在浏览器 [ ] 什么时候会出现…...

Pyecharts绘图教程(2)—— 绘制多种折线图(Line)参数说明+代码实战

文章目录 &#x1f3af; 1 简介&#x1f3af; 2 图表配置项2.1 导入模块2.2 数据配置项2.3 全局配置项 &#x1f3af; 3 代码实战3.1 基础折线3.2 平滑曲线&#xff08;is_smooth&#xff09;3.3 阶梯折线&#xff08;is_step&#xff09;3.4 空值过渡&#xff08;is_connect_n…...

oracle实现搜索不区分大小写

<if test"code ! null and code ! ">and upper(code) like upper(%${code}%) </if>关键字upper...

C++中->与.的区别

在类中 在 C 中&#xff0c;-> 和 . 都可以用于访问类的成员变量和成员函数。但它们在使用上有一些区别&#xff1a; 1. 对于指针类型的对象&#xff0c;必须使用 -> 来访问其成员&#xff1b;而对于非指针类型的对象&#xff0c;则需要使用 . 。 2. -> 运算符在实…...

第5章,[标签 Win32] :GDI 函数调用

专栏导航 上一篇&#xff1a;第5章&#xff0c;[标签 Win32] &#xff1a;GDI 的结构与原理 回到目录 下一篇&#xff1a;无 本节前言 对于本节所讲解的知识&#xff0c;有可能&#xff0c;你会需要时不时地参考本专栏的其它文章。真的遇到了需要参考之前的文章的知识点&a…...

AI预测晚期肠癌患者对NHS新药的治疗反应

英国癌症研究所与都柏林RCSI医学与健康科学大学的研究人员联合开发了一种基于AI的新方法&#xff0c;可用于预测晚期肠癌患者对一种NHS近期批准使用的新药的反应情况。此举旨在帮助数千名患者避免接受对其病情无效的治疗。仅在英国&#xff0c;每年确诊的晚期肠癌病例接近1万例…...

人工智能之数字生命-自我的4层12模块

一、根判定层 生命周期与边界控制模块 管待机、运行、收束、停止、死亡退出、降级运行。 世界/场景/状态刷新模块 刷新对象、场景、关系、当前值,形成“本轮可判定世界”。 服务值/安全值差额评估模块 统一计算服务差额与安全差额,给后续判断提供标尺。 根需求生成模块 从…...

从RNN到Mamba:我的序列建模踩坑史与状态空间模型(SSM)入门指南

从RNN到Mamba&#xff1a;我的序列建模踩坑史与状态空间模型(SSM)入门指南 记得第一次接触序列建模是在2018年&#xff0c;当时为了完成一个股票价格预测项目&#xff0c;我整夜调试着那个总是梯度爆炸的LSTM模型。五年后的今天&#xff0c;当我用Mamba处理同样长度的时序数据时…...

【AI知识点】交叉注意力机制:从原理到实战,打通多模态信息交互的桥梁

1. 从图文问答看交叉注意力机制的魅力 想象一下这样的场景&#xff1a;你给AI系统展示一张照片&#xff0c;照片里是一只橘猫趴在键盘上睡觉&#xff0c;然后问它"这只猫在做什么&#xff1f;"。要让AI准确回答"猫在键盘上睡觉"&#xff0c;它需要同时理解…...

2026年私域SCRM工具选型对比:场景适配、功能

AI驱动的私域运营工具成为主流。对于全渠道连锁门店、中大型品牌商家以及重视私域深度运营的企业而言&#xff0c;选择一款适配自身业务场景的SCRM工具&#xff0c;直接关系到会员复购率、运营效率和私域资产沉淀效果。本文基于真实案例数据与产品能力对比&#xff0c;为您提供…...

Smart SVN vs. 其他SVN客户端:我们为什么选择它作为团队的主力版本控制工具?

Smart SVN&#xff1a;为什么它成为中小团队版本控制的首选利器&#xff1f; 当团队规模从三五人扩展到十几人时&#xff0c;代码版本管理的复杂度往往呈指数级增长。我们团队在经历了几次严重的合并冲突后&#xff0c;开始系统性地评估各类SVN客户端工具。经过三个月的实际测试…...

Java 从入门到精通(十四):多线程入门,为什么程序一并发就开始变得“不听话”?

Java 从入门到精通&#xff08;十四&#xff09;&#xff1a;多线程入门&#xff0c;为什么程序一并发就开始变得“不听话”&#xff1f; 前一篇我们把 NIO 这条线讲清楚了&#xff1a;为什么 Java 后来不满足于传统 IO&#xff0c;为什么会引入 Path、Files、Buffer、Channel、…...

500W无桥PFC开关电源设计资料详解:硬件原理与C语言源码揭秘

500W 无桥PFC开关电源设计资料&#xff0c;C语言源码。 硬件原理 500W 无桥PFC开关电源设计资料&#xff0c;C语言源码。 硬件原理无桥PFC这玩意儿现在在电源圈子里火得不行&#xff0c;相比传统拓扑&#xff0c;它直接把整流桥给扬了&#xff0c;效率提升不是一点半点。今天…...

如何用jsPDF-AutoTable从HTML表格一键生成PDF文档

如何用jsPDF-AutoTable从HTML表格一键生成PDF文档 【免费下载链接】jsPDF-AutoTable jsPDF plugin for generating PDF tables with javascript 项目地址: https://gitcode.com/gh_mirrors/js/jsPDF-AutoTable jsPDF-AutoTable是一款强大的JavaScript插件&#xff0c;能…...