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-input 的 click 事件在内部的 input 组件禁用时,无法正常触发。目前,只是在部分 Android 机型上有这个问题。
所以,在处理类似的交互时可以选择如下方案进行修改:
- 在禁用状态下,在
u-input组件右侧添加icon,通过icon的点击事件拉起模态框 - 在
u-input组件顶部添加一个盒子,触发盒子的点击事件拉起模态框
注:input 组件是 uniapp 提供的内置表单组件,是没有点击事件的
相关文章:
uview1.0部分机型u-input组件禁用后无法触发click事件
最近,线上的一个 App 收到用户反馈,输入框禁用状态下点击无法拉起模态框。找了一下身边可用机型进行了测试,起初所有机型都没有复现这个问题,突然有一天 Redmi K30S Ultra 出现了异常,点击输入框无法触发点击事件&…...
Arduino IDE + Esp32 Cam + 实现视频流 + 开发环境部署
1、开发环境 Arduino ide 版本:2.2.1 esp32工具: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力扣打卡
打卡记录 同积元组(哈希表 排列组合) 链接 思路:用哈希表将数组中出现的两不同数乘积依次记录,将出现两次以上的乘积组通过排列组合计算总情况个数。 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的比较消融实验 总结 简介 题目:《Consistent-Teacher: Towards Reducing Inconsistent Pseudo-targets in Semi-supervi…...
设计模式:观察者模式(C#、JAVA、JavaScript、C++、Python、Go、PHP)
简介: 观察者模式,它是一种行为型设计模式,它允许一个对象自动通知其依赖者(观察者)状态的变化。当被观察者的状态发生改变时,它会通知所有的观察者对象,使他们能够及时做出响应。在观察者模式…...
kotling构造函数
Kotlin-继承与构造函数 - 简书 (jianshu.com) Kotlin语言中的继承与构造函数(详解)_kotlin 继承 构造函数_young螺母的博客-CSDN博客...
SpringMVC - 详解RESTful
文章目录 1. 简介2. RESTful的实现3.HiddenHttpMethodFilter4. RESTful案例1、准备工作2、功能清单3、具体功能:访问首页a>配置view-controllerb>创建页面 4、具体功能:查询所有员工数据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: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 实战教程
本篇博客我会演示日常的工作中,我们是怎么利用nginx部署项目的。我们以部署一套前后分离的项目为本次讲述的内容 一、搭建后端项目 创建一个最简单的springboot项目: 只需要依赖一个web模块即可: 提供一个api接口,可以获取服务端…...
Web自动化——python
文章目录 1.八大元素定位2.元素基本操作3.浏览器常用操作4.获取元素信息的常用方法5.鼠标和键盘相关操作6.元素等待1.隐式等待2.显示等待 7.下拉选择框8.弹出框9.滚动条操作10.frame表单的切换11.多窗口切换12.窗口截图、验证码处理 1.八大元素定位 元素属性定位:id…...
华为OD 整数最小和(100分)【java】A卷+B卷
华为OD统一考试A卷+B卷 新题库说明 你收到的链接上面会标注A卷还是B卷。目前大部分收到的都是B卷。 B卷对应20022部分考题以及新出的题目,A卷对应的是新出的题目。 我将持续更新最新题目 获取更多免费题目可前往夸克网盘下载,请点击以下链接进入: 我用夸克网盘分享了「华为O…...
正则表达式:文本处理中的瑞士军刀
正则表达式是用于提取字符串规律的规则,通过特定语法表达,以匹配符合该规律的字符串。它具有通用性,不仅适用于Python,也可用于其他编程语言。 下面我用Python的re模块来进行实战演示:(记得import re&…...
WebSocket 入门案例
目录 WebSocket入门案例WebSocket-server新增项目:添加依赖:yml:启动类: frontend-server前端项目:添加依赖:添加yml:启动类:前端引入JS:前端页面:后端代码:测试: WebSocket 入门案…...
华为OD 最大社交距离(100分)【java】A卷+B卷
华为OD统一考试A卷+B卷 新题库说明 你收到的链接上面会标注A卷还是B卷。目前大部分收到的都是B卷。 B卷对应20022部分考题以及新出的题目,A卷对应的是新出的题目。 我将持续更新最新题目 获取更多免费题目可前往夸克网盘下载,请点击以下链接进入: 我用夸克网盘分享了「华为O…...
Nginx缓存
Nginx缓存 一般情况下系统用到的缓存有三种 服务端缓存:缓存存在后端服务器,如redis 代理缓存:缓存存储在代理服务器或中间件,内容从后端服务器获取,保存在本地 客户端缓存:缓存在浏览器 [ ] 什么时候会出现…...
Pyecharts绘图教程(2)—— 绘制多种折线图(Line)参数说明+代码实战
文章目录 🎯 1 简介🎯 2 图表配置项2.1 导入模块2.2 数据配置项2.3 全局配置项 🎯 3 代码实战3.1 基础折线3.2 平滑曲线(is_smooth)3.3 阶梯折线(is_step)3.4 空值过渡(is_connect_n…...
oracle实现搜索不区分大小写
<if test"code ! null and code ! ">and upper(code) like upper(%${code}%) </if>关键字upper...
C++中->与.的区别
在类中 在 C 中,-> 和 . 都可以用于访问类的成员变量和成员函数。但它们在使用上有一些区别: 1. 对于指针类型的对象,必须使用 -> 来访问其成员;而对于非指针类型的对象,则需要使用 . 。 2. -> 运算符在实…...
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA(Direct Memory Access)直接存储器存取 DMA可以提供外设…...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
Python爬虫(二):爬虫完整流程
爬虫完整流程详解(7大核心步骤实战技巧) 一、爬虫完整工作流程 以下是爬虫开发的完整流程,我将结合具体技术点和实战经验展开说明: 1. 目标分析与前期准备 网站技术分析: 使用浏览器开发者工具(F12&…...
智能仓储的未来:自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”,物流的终极形态正在诞生 想象这样的场景: 凌晨3点,某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径;AI视觉系统在0.1秒内扫描包裹信息;数字孪生平台正模拟次日峰值流量压力…...
Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中,部分节点存储的数据量或访问量远高于其他节点,导致这些节点负载过高,影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录,但是由于这个树组件的节点越来越多,导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多,导致的浏览器卡顿,这里很明显就需要用到虚拟列表的技术&…...
力扣热题100 k个一组反转链表题解
题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...
0x-3-Oracle 23 ai-sqlcl 25.1 集成安装-配置和优化
是不是受够了安装了oracle database之后sqlplus的简陋,无法删除无法上下翻页的苦恼。 可以安装readline和rlwrap插件的话,配置.bahs_profile后也能解决上下翻页这些,但是很多生产环境无法安装rpm包。 oracle提供了sqlcl免费许可,…...
当下AI智能硬件方案浅谈
背景: 现在大模型出来以后,打破了常规的机械式的对话,人机对话变得更聪明一点。 对话用到的技术主要是实时音视频,简称为RTC。下游硬件厂商一般都不会去自己开发音视频技术,开发自己的大模型。商用方案多见为字节、百…...
