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

统软云封装了验证代码输入框的组件实例。

验证码输入框组件允许您自定义下一次单击的等待时间、验证码的长度，以及根据自定义的验证码长度验证输入内容。

组件参考

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

组件使用情况

<验证码输入limitSecond=｛seconds｝limitCode=｛codeLen｝onsetCode=“getCode”>；<；/验证码输入>

组件文件

验证代码输入.html

<模板>

<脚本>

导出默认值{

name:'验证码输入'，

已安装（）{

},

道具：{

limitSecond：数字，

limitCode：数字

},

数据（）{

返回{

显示：true，

计数：0，

计时器：空

}

},

方法：{

发送代码（）{

//定期验证手机号码

const TIME_ COUNT=this.props.limitSecond；

if（！this.data.timer）{

此数据。count=时间_计数；

此数据。show=假；

此数据。timer=setInterval（（）=>{

如果（this.data.count>0&&this.data-count<=TIME_count）{

此数据计数--；

}其他{

此数据。show=真；

clearInterval（this.data.timer）；

此数据。计时器=空；

}

}, 1000)

}

/**

*发送短信验证码

*/

},

获取代码（e）{

//验证验证码并根据位置和规则输出

如果（e.detail.value.length==this.props.limitCode）{

让reg=/^[0-9]*$/；

if（注册测试（e.detail.value））{

this.fire（'setCode'，e.detail.value）；

}

其他{

顶部({

msg:'请输入有效的验证码'；

})

}

}

否则如果（e.detail.value.length>this.props.limitCode）{

顶部({

msg:'请输入'+this.props。limitCode+“位验证码”；

})

}

}

}

}

部件使用示例

<模板>

<安全区域><；/安全区域>

<验证码输入limitSecond=｛seconds｝limitCode=｛codeLen｝onsetCode=“getCode”>；<；/验证码输入>

<脚本>

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

导出默认值{

name:'演示验证码输入'，

apiready（）{

},

数据（）{

返回{

代码：''；，

秒：60，

代码长度：4

}

},

方法：{

获取代码（e）{

console.log（JSON.stringify（e.detail））；

此数据。代码=e.detail；

}

}

}