Taro React组件使用(6) —— RuiSendCode 短信验证码【倒计时】
2023-09-14 09:15:07 时间
1. 需求分析
- 获取验证码按钮,点击后进入倒计时环节;
- 默认采用 120s 后才允许再次发送短信验证码;
- 发送后不能再次点击发送按钮,点击也不执行发送逻辑;
- 最好将发送短信的业务逻辑请求接口写在组件中,封装为公用组件,可以多处使用。
2. 实现效果
2.1 验证码发送前
2.2 验证码发送后
3. HTML 实现
- slot 是验证码输入行之前的手机号行插槽等,可以不传;
- children 是验证码输入框的 HTML,可以不传;
- className 未点击发送时按钮的样式;
- classActiveName 点击发送后按钮的样式;
- isStart 判断是显示倒计时,还是显示 【获取验证码】按钮。
return <View className='rui-send-code-temp-content'>
{props.slot}
<View className='rui-fa r
相关文章
- kaptcha图形验证码组件
- 实现拖拽复制和可排序的react.js组件
- 第二百三十九节,Bootstrap路径分页标签和徽章组件
- [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative
- react的3种组件
- [React Intl] Render Content with Markup Using react-intl FormattedHTMLMessage
- react-native新导航组件react-navigation详解
- 微信小程序----scroll-view组件(MUI索引列表)滚动动画
- atitti.atiNav 手机导航组件的设计
- atitit.React 优缺点 相比angular react是最靠谱的web ui组件化方案了
- atitit.React 优缺点 相比angular react是最靠谱的web ui组件化方案了
- iOS 组件化 模块化(二)
- Qt容器组件详解
- 【React Native开发】React Native控件之DrawerLayoutAndroid抽屉导航切换组件解说(13)
- Flutter之跨组件共享状态Provider原理剖析
- React学习笔记(二)—— JSX、组件与生命周期
- 前端MVC Vue2学习总结(五)——表单输入绑定、组件
- kubernetes 组件之 kube-proxy
- Rasa-Jieba-Ner:在Rasa中使用Jieba分词作为实体抽取组件
- React----组件生命周期知识点整理
- 使用hooks写React组件注意的5个地方
- 【taro react】 ---- Stepper 步进器组件封装