请选择 进入手机版 | 继续访问电脑版

AVM框架 封装验证码输入框组件

技术博客 2022-6-14 18:06 376人浏览 2人回复
原作者: wuliyuye 收藏 邀请
摘要

验证码输入框组件,可自定义下次点击等待时长,自定义验证码长度,可根据自定义的验证码长度进行输入内容的验证。 组件引用 import '../../components/verification-code-input.stml'复制代码 组件使用 verification ...

验证码输入框组件,可自定义下次点击等待时长,自定义验证码长度,可根据自定义的验证码长度进行输入内容的验证。
组件引用
  1. import '../../components/verification-code-input.stml'
复制代码

组件使用
  1. <verification-code-input limitSecond={seconds} limitCode={codeLen}></verification-code-input>
复制代码

组件文件verification-code-input.stml

  1. <template>
  2.         <view class="verification-code">
  3.                 <input class="code-input" placeholder="输入验证码" keyboard-type="number"/>
  4.                 <text v-show="show" class="code-btn" @click="sendCode">获取验证码</text>
  5.                 <text v-show="!show" class="code-btn">{count}s</text>
  6.         </view>
  7. </template>
  8. <script>
  9.         export default {
  10.                 name: 'verification-code-input',
  11.                 installed(){

  12.                 },
  13.                 props:{
  14.                         limitSecond:Number,
  15.                         limitCode:Number
  16.                 },
  17.                 data() {
  18.                         return{
  19.                                 show:true,
  20.                                 count: 0,
  21.                                 timer:null
  22.                         }
  23.                 },
  24.                 methods: {
  25.                         sendCode(){
  26.                                 //正则验证手机号码
  27.                                 const TIME_COUNT = this.props.limitSecond;
  28.                                 if (!this.data.timer) {
  29.                                         this.data.count = TIME_COUNT;
  30.                                         this.data.show = false;
  31.                                         this.data.timer = setInterval(() => {
  32.                                         if (this.data.count > 0 && this.data.count <= TIME_COUNT) {
  33.                                                         this.data.count--;
  34.                                                 } else {
  35.                                                         this.data.show = true;
  36.                                                         clearInterval(this.data.timer);
  37.                                                         this.data.timer = null;
  38.                                                 }
  39.                                         }, 1000)
  40.                                 }
  41.                                 /**
  42.                                  * 进行发送短信验证码的操作
  43.                                  */
  44.                         },
  45.                         getCode(e){
  46.                                 //对验证码进行校验 符合位置和规则进行输出
  47.                                 if(e.detail.value.length == this.props.limitCode){
  48.                                         let reg= /^[0-9]*$/;
  49.                                         if(reg.test(e.detail.value)){
  50.                                                 this.fire('setCode',e.detail.value);
  51.                                         }
  52.                                         else{
  53.                                                 api.toast({
  54.                                                         msg:'请输入有效的验证码!'
  55.                                                 })
  56.                                         }               
  57.                                 }
  58.                                 else if(e.detail.value.length > this.props.limitCode){
  59.                                         api.toast({
  60.                                                 msg:'请输入'+this.props.limitCode+"位验证码!"
  61.                                         })
  62.                                 }
  63.                         }
  64.                 }
  65.         }
  66. </script>
  67. <style>
  68.         .verification-code{
  69.                 flex-flow: row nowrap;
  70.                 margin: 10px 20px;
  71.                 justify-content: space-between;
  72.                 border-bottom: 0.5px solid #f0f0f0;
  73.                 align-items: center;
  74.         }
  75.         .code-input{
  76.                 width: auto;
  77.                 border: none;
  78.                 font-size: 18px;
  79.         }
  80.         .code-btn{
  81.                 color: #1492ff;
  82.                 font-size: 18px;
  83.         }
  84. </style>
复制代码


组件使用示例
  1. <template>
  2.         <view class="page">
  3.                 <safe-area></safe-area>
  4.                 <verification-code-input limitSecond={seconds} limitCode={codeLen}></verification-code-input>
  5.         </view>
  6. </template>
  7. <script>
  8.         import '../../components/verification-code-input.stml'
  9.         export default {
  10.                 name: 'demo-verification-code-input',
  11.                 apiready(){

  12.                 },
  13.                 data() {
  14.                         return{
  15.                                 code:'',
  16.                                 seconds:60,
  17.                                 codeLen:4
  18.                         }
  19.                 },
  20.                 methods: {               
  21.                         getCode(e){
  22.                                 console.log(JSON.stringify(e.detail));
  23.                                 this.data.code = e.detail;
  24.                         }
  25.                 }
  26.         }
  27. </script>
  28. <style>
  29.         .page {
  30.                 height: 100%;
  31.                 background-color: #ffffff;
  32.                 padding-top: 100px;
  33.         }
  34.         .verification-code{
  35.                 flex-flow: row nowrap;
  36.                 margin: 10px 20px;
  37.                 justify-content: space-between;
  38.                 border-bottom: 0.5px solid #f0f0f0;
  39.                 align-items: center;
  40.         }
  41.         .code-input{
  42.                 width: auto;
  43.                 border: none;
  44.                 font-size: 15px;
  45.                 flex: 1;
  46.         }
  47.         .code-btn{
  48.                 color: #1492ff;
  49.                 font-size: 15px;
  50.         }
  51. </style>
复制代码

示例展示
微信图片_20220530103908.jpg微信图片_20220530103924.jpg
评论
376人参与,2条评论

精彩评论

查看全部评论>>