code学习

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

APICloud AVM框架封装验证码输入框组件实例。

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

组件引用

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

组件使用

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

组件文件

verification-code-input.stml

<template>

<view class="verification-code">

<input class="code-input" placeholder="输入验证码" keyboard-type="number" oninput="getCode"/>

<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} onsetCode="getCode"></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%;

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>

继续阅读