最近需要自己做一个验证密码的密码框,实现效果如下图所示
该密码框实现的基本思路就是将Input隐藏起来,然后根据Input输入中value的长度,展示出相应数量的*。(这里提供简易的Taro,React的代码)
const PasswordCom = () => {
const [pwd, setPwd] = useState('')
const len = pwd.length
const arr = [0,1,2,3,4,5]
return (
<View>
<Input
maxLength={6}
type='number'
onInput={e => setPwd(e.detail.value)}
style={
{ visibility: "hidden",width: 0,height: 0}}
/>
<View>
{arr.map(item => {
return <View className='自己的样式'>{item < len ? '*' : ''}</View>
})}
</View>
</View>
);
}
现