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