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