网站教程设计,关于网站建设 策划文案,网站平台建设咨询合同,个人网页设计作品手绘最近#xff0c;线上的一个 App 收到用户反馈#xff0c;输入框禁用状态下点击无法拉起模态框。找了一下身边可用机型进行了测试#xff0c;起初所有机型都没有复现这个问题#xff0c;突然有一天 Redmi K30S Ultra 出现了异常#xff0c;点击输入框无法触发点击事件…最近线上的一个 App 收到用户反馈输入框禁用状态下点击无法拉起模态框。找了一下身边可用机型进行了测试起初所有机型都没有复现这个问题突然有一天 Redmi K30S Ultra 出现了异常点击输入框无法触发点击事件只有输入框右侧的图标可以触发点击事件。 接着看了一下 uview 的源码u-input 组件在 input 组件外套了盒子外面的盒子确实绑定了 click 事件我们处理的实际上是 u-input 组件的点击事件而不是 input 组件的点击事件。
templateviewclassu-input:class{u-input--border: border,u-input--error: validateState}:style{padding: 0 ${border ? 20 : 0}rpx,borderColor: borderColor,textAlign: inputAlign}tap.stopinputClick……view classu-input__right-icon u-flexview classu-input__right-icon__clear u-input__right-icon__item taponClear v-ifclearable value ! focusedu-icon size32 nameclose-circle-fill color#c0c4cc//viewview classu-input__right-icon__clear u-input__right-icon__item v-ifpasswordIcon type passwordu-icon size32 :name!showPassword ? eye : eye-fill color#c0c4cc clickshowPassword !showPassword//viewview classu-input__right-icon--select u-input__right-icon__item v-iftype select :class{u-input__right-icon--select--reverse: selectOpen}u-icon namearrow-down-fill size26 color#c0c4cc/u-icon/view/view/view
/templatescript
export default {name: u-input,……methods: {……inputClick() {this.$emit(click);}}
};
/script最终定位到问题是 u-input 的 click 事件在内部的 input 组件禁用时无法正常触发。目前只是在部分 Android 机型上有这个问题。
所以在处理类似的交互时可以选择如下方案进行修改
在禁用状态下在 u-input 组件右侧添加 icon 通过 icon 的点击事件拉起模态框在 u-input 组件顶部添加一个盒子触发盒子的点击事件拉起模态框
注input 组件是 uniapp 提供的内置表单组件是没有点击事件的
