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 提供的内置表单组件,是没有点击事件的

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

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

相关文章

专业安卓实时投屏软件:极限投屏(QtScrcpy作者开发)使用说明

基本介绍 极限投屏是一款批量投屏管理安卓设备的软件&#xff0c;是QtScrcpy作者基于QtScrcpyCore开发&#xff0c;主要功能有&#xff1a; 设备投屏&控制&#xff1a;单个控制、批量控制分组管理wifi投屏adb shell快捷指令文件传输、apk安装 更多功能还在持续更新。 极…

Locust负载测试工具实操

本中介绍如何使用Locust为开发的服务/网站执行负载测试。 Locust 是一个开源负载测试工具&#xff0c;可以通过 Python 代码构造来定义用户行为&#xff0c;避免混乱的 UI 和臃肿的 XML 配置。 步骤 设置Locust。 在简单的 HTTP 服务上模拟基本负载测试。 准备条件 Python…

远程监控高并发高吞吐java进程

文章目录 背景工具jconsole和jvisualvm 压测实战以太坊Java程序监控1.使用jconsole监控2.使用jvisualvm监控 问题分析堆内存使用异常通过调整内存策略来应对&#xff1a; 交易虚增问题 背景 作为使用java技术栈的金融类公司&#xff0c;确保Java程序在生产环境中的稳定性和性能…

2023年【北京市安全员-B证】考试试卷及北京市安全员-B证模拟考试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 北京市安全员-B证考试试卷考前必练&#xff01;安全生产模拟考试一点通每个月更新北京市安全员-B证模拟考试题题目及答案&#xff01;多做几遍&#xff0c;其实通过北京市安全员-B证在线考试很简单。 1、【多选题】《…

JVM(Java Virtual Machine)垃圾收集算法篇

前言 本文参考《深入理解Java虚拟机》&#xff0c;主要介绍GC相关的算法&#xff0c;引用计数法、可达性分析算法、垃圾收集算法&#xff08;分代收集理论&#xff0c;标记-清除/整理/复制&#xff09; 本系列其他文章链接&#xff1a; JVM&#xff08;Java Virtual Machine&…

macrodata数据集在Python统计建模和计量经济学中的应用

目录 一、数据介绍二、应用三、statsmodels 统计模块四、使用 statsmodels 统计模块分析 macrodata.csv 数据集参考 一、数据介绍 macrodata.csv是一个示例数据集&#xff0c;通常用于统计分析和计量经济学中的教育和训练目的。这个数据集通常包括以下列&#xff1a; year&am…

STM32使用WWDG窗口看门狗

1 WWDG 介绍 1.1 WWDG 简介 窗口看门狗 WWDG 其实和独立看门狗类似&#xff0c;它是一个 7 位递减计数器不断的往下递减计数&#xff0c; 当减到一个固定值 0X40 时还不喂狗的话&#xff0c;产生一个 MCU 复位&#xff0c;这个值叫窗口的下限&#xff0c;是固定的值&#xf…

支持语音与视频即时通讯项目杂记(二)

目录 概念&#xff1a; 视频帧&#xff08;Video Frame&#xff09;是组成视频的基本单元。它可以被视为一幅静止的图像&#xff0c;它在一定的时间间隔内连续播放&#xff0c;从而形成了流畅的视频。 Changes to Qt Multimedia New features in Qt 6 Removed features C…

居民小区电动汽车有序充电策略研究

摘 要&#xff1a;针对电动汽车在居民小区无序充电对电网系统产生严重隐患及充电间时过长问题&#xff0c;提出一种采用延迟充电的电动汽车有序充电控制策略&#xff0c;并在分析国内外电动汽车有序充电的研究现状后&#xff0c;设计了居民小区电动汽车有序充电策略的总体框架。…

JIT耗时优化

优质博文&#xff1a;IT-BLOG-CN 一、背景 业务流量突增&#xff0c;机器直接接入大量流量QPS2000&#xff0c;JIT和GC会消耗太多CPU资源&#xff0c;导致1-2分钟时间内的请求超时导致异常&#xff0c;因此采用流量预热的方式&#xff0c;让机器逐步接入流量&#xff0c;需要预…

vscode类似GitHub Copilot的插件推荐

由于GitHub Copilot前段时间学生认证的账号掉了很多&#xff0c;某宝激活也是价格翻了几倍&#xff0c;而却&#xff0c;拿来用一天就掉线&#xff0c;可以试试同类免费的插件哦。 例如&#xff1a;TabNine&#xff0c;下载插件后&#xff0c;他会提示你登录&#xff0c;直接登…

spring6-国际化:i18n | 数据校验:Validation

文章目录 1、国际化&#xff1a;i18n1.1、i18n概述1.2、Java国际化1.3、Spring6国际化1.3.1、MessageSource接口1.3.2、使用Spring6国际化 2、数据校验&#xff1a;Validation2.1、Spring Validation概述2.2、实验一&#xff1a;通过Validator接口实现2.3、实验二&#xff1a;B…

关于计算机找不到vcomp140.dll无法继续执行怎么修复

在计算机使用过程中&#xff0c;我们可能会遇到各种问题&#xff0c;其中之一就是vcomp140.dll文件丢失。vcomp140.dll是一个动态链接库文件&#xff0c;它通常用于支持软件运行和系统功能。当这个文件丢失时&#xff0c;可能会导致程序无法正常运行&#xff0c;甚至系统出现错…

分类预测 | MATLAB实现SSA-CNN-BiLSTM麻雀算法优化卷积双向长短期记忆神经网络数据分类预测

分类预测 | MATLAB实现SSA-CNN-BiLSTM麻雀算法优化卷积双向长短期记忆神经网络数据分类预测 目录 分类预测 | MATLAB实现SSA-CNN-BiLSTM麻雀算法优化卷积双向长短期记忆神经网络数据分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.MATLAB实现SSA-CNN-BiLSTM数据…

大厂秋招真题【贪心】大疆20230813秋招T1-矩形田地

题目描述与示例 题目描述 给定一个矩形田地&#xff0c;其高度为 h 且宽度为 w。同时&#xff0c;你将获得两个整数数组 horizontalCutting 和 verticalCutting&#xff0c;其中 horizontalCutting[i] 表示从矩形田地顶部到第 i 个水平切口的距离&#xff0c;verticalCutting…

使用CountdownLatch和线程池批量处理http请求,并处理响应数据

背景和问题 ​ 背景&#xff1a;最近项目的一个接口数据&#xff0c;需要去请求其他多个服务器的数据&#xff0c;然后统一返回&#xff1b; 问题点&#xff1a;如果遍历所有的服务器地址&#xff0c;然后串行请求就会出现请求时间过长&#xff0c;加入需要请求十个服务器&…

解决谷歌学术bib信息不全的问题

在我们撰写学术论文时&#xff0c;经常需要引用参考文献。如果用latex撰写论文&#xff0c;势必会用到文献的bib信息&#xff0c;大部分的教程都会告诉我们去google scholar上去搜索。 一、问题描述 搜索一篇文章&#xff0c;然后选择cite&#xff0c;再选择bib。 很明显&…

Node学习笔记之MySQL基本使用

使用 SQL 管理数据库 其实写接口简单来说就是操作数据库数据&#xff0c;所以我们需要学会数据库的增、删、查、改等基本操作 1. 什么是 SQL SQL&#xff08;英文全称&#xff1a;Structured Query Language&#xff09;是结构化查询语言&#xff0c;专门用来访问和处理数据…

(2)Nmap

笔记目录 渗透测试工具(1)wireshark渗透测试工具(2)Nmap渗透测试工具(3)BurpsuiteAWD比赛(1)AWD入门攻略大纲 1.工具简介 (1)定义 ①功能 网络扫描和嗅探工具包&#xff0c;三个主要基本功能&#xff1a; 探测一组主机是否在线 扫描主机端口、嗅探所提供的网络服务 推断出主…

Keil实现Flash升级跳转(STM32/GD32/HC32)

编写BOOT程序&#xff0c;和APP程序。 BOOT程序检查OTA参数&#xff0c;执行OTA升级&#xff0c;然后跳转到APP代码。 记录一下跳转APP需要修改得东西&#xff1a; 1、BOOT程序 修改跳转地址 先检查APP地址是否有效 然后关闭外设 反初始化 设置MSP指针&#xff0c;进行跳转 …