【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;
【Taro全实践】6位验证码输入视觉分离(标准下划线分离)的更多相关文章
- “全栈2019”Java第十六章:下划线在数字中的意义
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- 【Taro全实践】Taro在微信小程序中的生命周期
一.Taro的本身生命周期 生命周期componentWillMount在微信小程序中这一生命周期方法对应页面的onLoad或入口文件app中的onLaunch componentDidMount在微 ...
- 【Taro全实践】修改radio组件的大小
需求是将radio选中后颜色改为橙色.大小改成合适大小. 1.改颜色 <Radio color='#FF7464'></Radio> 2.改大小 <Radio style ...
- 巨蟒python全栈开发django8:基于对象和基于双下划线的多表查询
1.编辑删除&&多对多关系的其他方法 提交,数据,得到结果 查看运行 给编辑和删除,添加样式 我们点击删除,可以成功删除 打印sql语句的,在settings.py里边的配置 LOGG ...
- js 做的随机8位验证码
开发思路: 画出放置验证码的模块.一个写有“看不清…”的小块,以及输入验证码的文本框 获取各个模块 封装一个函数Yan_ma(),设置验证码为8位,里面含有数字,小写字母,小写字母和中文.每种类型出现 ...
- java练习题(字符串类):显示4位验证码、输出年月日、从XML中抓取信息
1.显示4位验证码 注:大小写字母.数字混合 public static void main(String[] args) { String s="abcdefghijklmnopqrstu ...
- Think PHP 提示验证码输入错误
最近遇到一个项目中用的是Thinkphp这个框架开发的,其中在登录这块有验证码这个功能,其实这个功能是TP自带的,其中主要方法是buildImageVerify,位于ThinkPHP\Extend\L ...
- EditText格式化11位手机号输入xxx xxxx xxxx
EditText格式化11位手机号输入xxx xxxx xxxx /** * 格式化11位手机号码输入 xxx xxxx xxxx格式 * 如果一直是添加:输入到第三个或第8个数字时 ...
- js input框输入1位数字后自动跳到下一个input框聚焦
// input框输入1位数字后自动跳到下一个input聚焦 function goNextInput(el){ var txts = document.querySelectorAll(el); f ...
随机推荐
- Spring Cloud(五)断路器监控(Hystrix Dashboard)
在上两篇文章中讲了,服务提供者 Eureka + 服务消费者 Feign,服务提供者 Eureka + 服务消费者(rest + Ribbon),本篇文章结合,上两篇文章中代码进行修改加入 断路器监控 ...
- ES7.x mapping 类型
在将ES从2.3 升级到7.3版本的过程中,mapping是一个过不去的坎,很多类型都发生了变化 7.x常用数据类型:text.keyword.number.array.range.boolean.d ...
- C 字符串几点
1.字符串结尾必须为“\0” 2.多种处理函数在<string.h> 3.常用字符串处理函数: 1.strlen 求字符串长度(\0不算在内) 2.strcpy(a,b) 将b复制到a中 ...
- (转)android(SignalA)接收.net(SignalR)推送过来的消息
从网络上搜索到的Demo,自己进行了稍微的改动 Signala类库从https://github.com/erizet/SignalA获得,不过相关引用有错误,需要手动修正. 下载相关源码 packa ...
- 一步步实现ArcMenu效果
先来看一下最终要实验的效果: 是不是跟国外的一款Path的菜单效果类似,这里的动画采用补间动画去实现,正而操练一下补间动画. 布局和子视图的测量处理: 新建一自定义View继承ViewGroup: 然 ...
- bind9+dlz+mysql连接断开问题
前言 关于bind-dlz介绍:http://bind-dlz.sourceforge.net/ DLZ(Dynamically Loadable Zones)与传统的BIND9不同,BIND的不足之 ...
- JLOI2016 侦查守卫
侦查守卫 小R和B神正在玩一款游戏.这款游戏的地图由 N 个点和 N-1 条无向边组成,每条无向边连接两个点,且地图是连通的.换句话说,游戏的地图是一棵有 N 个节点的树. 游戏中有一种道具叫做侦查守 ...
- loj2587 「APIO2018」铁人两项[圆方树+树形DP]
主要卡在一个结论上..关于点双有一个常用结论,也经常作为在圆方树/简单路径上的良好性质,对于任意点双内互不相同的三点$s,c,t$,都存在简单路径$s\to c\to t$,证明不会.可以参见clz博 ...
- 线段树(四)——两个标记(add和set)
add无序,set有序.规定同时有两个标记时,表示先执行set再执行add. 1. 更新操作: int op,cl,cr,v; void update(int o, int L, int R) { , ...
- Vmware虚拟机 centos7设置固定IP地址
参考文章:https://www.cnblogs.com/lfhappy/p/10798400.html https://blog.csdn.net/u014466635/article/d ...