vue 手机验证码登录,vue短信验证码组件
本文主要介绍了某视频剪辑软件实现通过手机号发送短信验证码登录的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
本文主要介绍了某视频剪辑软件实现通过手机号发送短信验证码登录的示例代码，分享给大家，具体如下：
模板
div class= get-mobile @触摸移动。预防
div class=main
div class=pt-20 pr-15 pl-15 pb-20
input class= input m b-15 v-model=形式。电话 placeholder=请输入手机号type=number
div class=box
input class= input v-model=表单。远程验证码 placeholder=请输入短信验证码type=number
div class= El-button @ click= send“{ count down } }/div
/div
/div
div class=btn @click=sumbit 提交/div
/div
/div
/模板
脚本
从xx 导入{ sendLoginMsgCode，登录}；
导出默认值{
名称： GetMobile ，
data() {
返回{
表单：{
telVerificationCode:" "，
电话： ,
},
倒计时： 发送验证码, //倒计时
b验证：false //节流
}
},
方法：{
异步sumbit() {
const { telVerificationCode，tel }=this.form
如果(!telVerificationCode ！电话)还这个$吐司(’请输入手机号和验证码);
让{代码，数据}=等待登录({
电话，
telVerificationCode，
等值线：假
});
如果（代码===200) {
这个$吐司(’登录成功);
这个. emit(sumbit ，数据。userinfo)；
这个emit(update:dialog ，false)
}
},
异步发送(){
如果(!/^\d{11}$/.测试(this.form.tel))还这个$吐司(’请先输入正确的手机号);
如果(this . b验证)返回；
this.bVerification=true
const { code }=await sendLoginMsgCode({
电话：this.form.tel
});
如果（代码===200) {
这个$吐司(’发送验证码.);
}
设倒计时=59;
const auth _ time=setInterval(()={
this .倒计时=倒计时-;
如果(this.countDown=0) {
this.bVerification=false
this.countDown=发送验证码；
清除间隔(auth _ time)；
}
}, 1000);
}
}
}
/脚本
样式lang=scss 范围。移动办公{
身高：100vh
宽度：100vw
背景色：rgba(0，0，0，6);
显示器：flex
对齐-内容：居中；
对齐-项目：居中；主要{
宽度：280像素
身高：178像素
背景：# FFFFFF
边框半径：5px。输入{
边框：1px solid # EBEBEF
边框半径：5px
高度：40px
左填充：10px
}。埃尔按钮{
左边距：10px
边框半径：5px
背景：# 5f 93 FD
颜色：# fff
宽度：140像素
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
}。btn {
高度：45像素
颜色：# 5f 93 FD
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
border-top:1px solid # EBEBEF；
}
}
}
/风格
关于vue通过手机号发送短信验证码登录的示例代码本文到此为止。关于vue验证码登录的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。