【Taro全實踐】6位驗證碼輸入視覺分離(標准下划線分離)


一、實現的效果圖

 

二、實現思路

中間想過很多實現方法,但是因為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;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM