最近，線上的一個(gè) App 收到用戶反饋，輸入框禁用狀態(tài)下點(diǎn)擊無(wú)法拉起模態(tài)框。找了一下身邊可用機(jī)型進(jìn)行了測(cè)試，起初所有機(jī)型都沒(méi)有復(fù)現(xiàn)這個(gè)問(wèn)題，突然有一天 Redmi K30S Ultra 出現(xiàn)了異常，點(diǎn)擊輸入框無(wú)法觸發(fā)點(diǎn)擊事件，只有輸入框右側(cè)的圖標(biāo)可以觸發(fā)點(diǎn)擊事件。

接著看了一下 uview 的源碼，u-input 組件在 input 組件外套了盒子，外面的盒子確實(shí)綁定了 click 事件，我們處理的實(shí)際上是 u-input 組件的點(diǎn)擊事件而不是 input 組件的點(diǎn)擊事件。

<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>

最終定位到問(wèn)題是 u-input 的 click 事件在內(nèi)部的 input 組件禁用時(shí)，無(wú)法正常觸發(fā)。目前，只是在部分 Android 機(jī)型上有這個(gè)問(wèn)題。

所以，在處理類似的交互時(shí)可以選擇如下方案進(jìn)行修改：

• 在禁用狀態(tài)下，在 u-input 組件右側(cè)添加 icon ，通過(guò) icon 的點(diǎn)擊事件拉起模態(tài)框
• 在 u-input 組件頂部添加一個(gè)盒子，觸發(fā)盒子的點(diǎn)擊事件拉起模態(tài)框

注：input 組件是 uniapp 提供的內(nèi)置表單組件，是沒(méi)有點(diǎn)擊事件的