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

wuliyuye

本帖最后由 wuliyuye 于 2022-5-30 11:07 编辑

验证码输入框组件，可自定义下次点击等待时长，自定义验证码长度，可根据自定义的验证码长度进行输入内容的验证。
组件引用

import '../../components/verification-code-input.stml'

复制代码

组件使用

<verification-code-input limitSecond={seconds} limitCode={codeLen}></verification-code-input>

复制代码

组件文件verification-code-input.stml

<template>
<view class="verification-code">
<input class="code-input" placeholder="输入验证码" keyboard-type="number"/>
<text v-show="show" class="code-btn" @click="sendCode">获取验证码</text>
<text v-show="!show" class="code-btn">{count}s</text>
</view>
</template>
<script>
export default {
name: 'verification-code-input',
installed(){
},
props:{
limitSecond:Number,
limitCode:Number
},
data() {
return{
show:true,
count: 0,
timer:null
}
},
methods: {
sendCode(){
//正则验证手机号码
const TIME_COUNT = this.props.limitSecond;
if (!this.data.timer) {
this.data.count = TIME_COUNT;
this.data.show = false;
this.data.timer = setInterval(() => {
if (this.data.count > 0 && this.data.count <= TIME_COUNT) {
this.data.count--;
} else {
this.data.show = true;
clearInterval(this.data.timer);
this.data.timer = null;
}
}, 1000)
}
/**
* 进行发送短信验证码的操作
*/
},
getCode(e){
//对验证码进行校验符合位置和规则进行输出
if(e.detail.value.length == this.props.limitCode){
let reg= /^[0-9]*$/;
if(reg.test(e.detail.value)){
this.fire('setCode',e.detail.value);
}
else{
api.toast({
msg:'请输入有效的验证码！'
})
}
}
else if(e.detail.value.length > this.props.limitCode){
api.toast({
msg:'请输入'+this.props.limitCode+"位验证码！"
})
}
}
}
}
</script>
<style>
.verification-code{
flex-flow: row nowrap;
margin: 10px 20px;
justify-content: space-between;
border-bottom: 0.5px solid #f0f0f0;
align-items: center;
}
.code-input{
width: auto;
border: none;
font-size: 18px;
}
.code-btn{
color: #1492ff;
font-size: 18px;
}
</style>

复制代码

组件使用示例

<template>
<view class="page">
<safe-area></safe-area>
<verification-code-input limitSecond={seconds} limitCode={codeLen}></verification-code-input>
</view>
</template>
<script>
import '../../components/verification-code-input.stml'
export default {
name: 'demo-verification-code-input',
apiready(){
},
data() {
return{
code:'',
seconds:60,
codeLen:4
}
},
methods: {
getCode(e){
console.log(JSON.stringify(e.detail));
this.data.code = e.detail;
}
}
}
</script>
<style>
.page {
height: 100%;
background-color: #ffffff;
padding-top: 100px;
}
.verification-code{
flex-flow: row nowrap;
margin: 10px 20px;
justify-content: space-between;
border-bottom: 0.5px solid #f0f0f0;
align-items: center;
}
.code-input{
width: auto;
border: none;
font-size: 15px;
flex: 1;
}
.code-btn{
color: #1492ff;
font-size: 15px;
}
</style>

复制代码

示例展示

技术咨询-F

感谢分享

技术咨询-特特

感谢分享

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

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