首页 > 其他分享> 文章详细

【Taro全实践】6位验证码输入视觉分离（标准下划线分离）

2019-03-08 15:52:40 阅读：557 来源： 互联网

标签：Taro 下划线适配分离 value 组件 input 输入 dataItem

一、我是实现的效果图

二、实现思路

中间想过很多实现方法，但是因为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;
    console.log('valuevalue',value);
    // adminStore.selectCode = value;
    const data = value.split('');
    let dataItem = ['','','','','',''];
    data.map(
      (item,index)=>{
        dataItem[index] = item;
      }
    )
    adminStore.selectCode = dataItem;
    return value;
}

标签：Taro,下划线,适配,分离,value,组件,input,输入,dataItem
来源： https://www.cnblogs.com/piaobodewu/p/10496191.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【Taro全实践】6位验证码输入视觉分离（标准下划线分离）