一、實現的效果圖
二、實現思路
中間想過很多實現方法,但是因為input為原生組件的原因,很難適配所有手機直接。
所有如何實現適配所有手機的驗證碼分離輸入呢?(思路如下)
1、input組件為原生組件會造成適配問題,所以我們換個思路,如果能直接不用input組件不就沒有這個問題了,但是並不是真的不用input,而是讓input看不到
2、方法就是給input一個className,使它width:0;height:0;,然后讓輸入框focus={true},通過OnInput方法的e然后e.detail.value,這樣既能拿到輸入值又不會讓input框出現
3、如何讓輸入內容出現呢,通過e.detail.value拿到輸入內容,再寫6個View,將輸入內容分別顯示到6個View內(View高度要提前固定哦)
三、實現代碼(Taro+ts+mobx)
<AtModal> <AtModalContent> <View className='AtModalContentPhone'> <View className='title'>請輸入核銷碼</View> <View className='content'> <View className='contentInners'> <Input maxLength={6} type='text' focus={isFocusNumber} // style={{}} className='model_4' cursorSpacing={110} // value={selectCode} onInput={this.handleChangeCode} /> </View> <View className='model_u' onClick={this.modelFrame}> <View className='model_u_b'> <View className='model_u_frame'> {selectCodeA} </View> <View className='model_u_frame'> {selectCodeB} </View> <View className='model_u_frame'> {selectCodeC} </View> <View className='model_u_frame'> {selectCodeD} </View> <View className='model_u_frame'> {selectCodeE} </View> <View className='model_u_frame'> {selectCodeF} </View> </View> </View> </View> </View> </AtModalContent> <AtModalAction> <Button onClick={this.closeSelectModal}>取消</Button> <Button style={{color:'rgba(255,100,100,1)'}} onClick={this.handleCodeConfirm}>確定</Button> </AtModalAction> </AtModal> public handleChangeCode(e){ let value = e.detail.value; // adminStore.selectCode = value; const data = value.split(''); let dataItem = ['','','','','','']; data.map( (item,index)=>{ dataItem[index] = item; } ) adminStore.selectCode = dataItem; return value; }
三、遇到的坑
1、寫Input組件的OnInput對應的函數時要return e.detail.value。這樣輸出框的值才能改變
2、數據格式的轉化。以輸入'123456'為例。'123456'->['1','2','3','4','5','6']->selectCode[0]----selectCode[5]逐個渲染出來。
其中為了保證數組0-5都存在,需要先定義一個dataItem = ['','','','','',''];,然后將dataItem值賦給selectCode;