当前位置: 首页 > news >正文

Taro React组件使用(6) —— RuiSendCode 短信验证码【倒计时】

1. 需求分析

  1. 获取验证码按钮,点击后进入倒计时环节;
  2. 默认采用 120s 后才允许再次发送短信验证码;
  3. 发送后不能再次点击发送按钮,点击也不执行发送逻辑;
  4. 最好将发送短信的业务逻辑请求接口写在组件中,封装为公用组件,可以多处使用。

2. 实现效果

2.1 验证码发送前

输入图片说明

2.2 验证码发送后

输入图片说明

3. HTML 实现

  1. slot 是验证码输入行之前的手机号行插槽等,可以不传;
  2. children 是验证码输入框的 HTML,可以不传;
  3. className 未点击发送时按钮的样式;
  4. classActiveName 点击发送后按钮的样式;
  5. isStart 判断是显示倒计时,还是显示 【获取验证码】按钮。
  return <View className='rui-send-code-temp-content'>{props.slot}<View className='rui-fa r
http://www.lryc.cn/news/56267.html

相关文章:

  • 把ChatGPT接入我的个人网站
  • 关于数字游民是未来年轻人工作趋势的一种思考
  • 2022年 合肥市经开区信息学竞赛区赛 初中组
  • 【工作小札】自定义classloader实现热加载jar
  • spring—AOP
  • 自己曾经的C++笔记【在c盘爆满的时候找到的回忆】
  • Nginx 实战-负载均衡
  • 本周大新闻|128GB版Quest 2再降价,Mojo Vision完成“新A轮”融资
  • 【论文阅读】如何给模型加入先验知识
  • arm系列交叉编译器各版本区别
  • 随笔记录工作日志
  • LinkedHashMap源码分析以及LRU的应用
  • 【每日一题Day166】LC1053交换一次的先前排列 | 贪心
  • Canal增量数据订阅和消费——原理详解
  • 为什么要使用线程池
  • 在云服务部署前后端以及上传数据库
  • Onedrive for Business迁移方案 | 分享一
  • pt01数据类型、语句选择
  • ChatGPT 存在很大的隐私问题
  • 图的迭代深度优先遍历
  • 华为OD机试-开放日活动-2022Q4 A卷-Py/Java/JS
  • 两亲性聚合物:Lauric acid PEG Maleimide,Mal-PEG-Lauric acid,月桂酸PEG马来酰亚胺,试剂知识分享
  • FB使用入口点函数例子
  • 学习周报4/9
  • 49天精通Java,第14天,Java泛型方法的定义和使用
  • 20230402英语学习
  • Java知识复习(十七)SpringCloud
  • MySQL 数据库操作
  • Cesium更换地球背景
  • 测试人员的瓶颈期