vue實現(xiàn)通過手機號發(fā)送短信驗證碼登錄的示例代碼
更新時間:2022年05月26日 09:33:14 作者:夏暖冬涼
本文主要介紹了vue實現(xiàn)通過手機號發(fā)送短信驗證碼登錄的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
本文主要介紹了vue實現(xiàn)通過手機號發(fā)送短信驗證碼登錄的示例代碼,分享給大家,具體如下:
<template> <div class="get-mobile" @touchmove.prevent> <div class="main"> <div class="pt-20 pr-15 pl-15 pb-20"> <input class="input mb-15" v-model="form.tel" placeholder="請輸入手機號" type="number"> <div class="box"> <input class="input" v-model="form.telVerificationCode" placeholder="請輸入短信驗證碼" type="number"> <div class="el-button" @click="send">{{ countDown }}</div> </div> </div> <div class="btn" @click="sumbit">提交</div> </div> </div> </template> <script> import { sendLoginMsgCode, login } from 'xx'; export default { name: 'GetMobile', data() { return { form: { telVerificationCode: '', tel: '', }, countDown: "發(fā)送驗證碼", // 倒計時 bVerification: false // 節(jié)流 } }, methods: { async sumbit() { const { telVerificationCode, tel } = this.form if (!telVerificationCode || !tel) return this.$toast("請輸入手機號和驗證碼"); let { code, data } = await login({ tel, telVerificationCode, isOffline: false }); if (code === 200) { this.$toast('登錄成功'); this.$emit('sumbit', data.userInfo); this.$emit('update:dialog', false) } }, async send() { if (!/^\d{11}$/.test(this.form.tel)) return this.$toast("請先輸入正確的手機號"); if (this.bVerification) return; this.bVerification = true; const { code } = await sendLoginMsgCode({ tel: this.form.tel }); if (code === 200) { this.$toast("發(fā)送驗證碼..."); } let countDown = 59; const auth_time = setInterval(() => { this.countDown = countDown--; if (this.countDown <= 0) { this.bVerification = false; this.countDown = "發(fā)送驗證碼"; clearInterval(auth_time); } }, 1000); } } } </script> <style lang='scss' scoped> .get-mobile { height: 100vh; width: 100vw; background-color: rgba(0, 0, 0, .6); display: flex; justify-content: center; align-items: center; .main { width: 280px; height: 178px; background: #FFFFFF; border-radius: 5px; .input { border: 1px solid #EBEBEF; border-radius: 5px; height: 40px; padding-left: 10px; } .el-button { margin-left: 10px; border-radius: 5px; background: #5F93FD; color: #fff; width: 140px; display: flex; justify-content: center; align-items: center; } .btn { height: 45px; color: #5F93FD; display: flex; justify-content: center; align-items: center; border-top: 1px solid #EBEBEF; } } } </style>
到此這篇關于vue實現(xiàn)通過手機號發(fā)送短信驗證碼登錄的示例代碼的文章就介紹到這了,更多相關vue 驗證碼登錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
VUE中如何優(yōu)雅實現(xiàn)爺孫組件的數(shù)據(jù)通信
所謂祖孫組件,也就是3層嵌套的組件,下面這篇文章主要給大家介紹了關于VUE中如何優(yōu)雅實現(xiàn)爺孫組件的數(shù)據(jù)通信的相關資料,需要的朋友可以參考下2022-04-04Vue組件庫ElementUI實現(xiàn)表格加載樹形數(shù)據(jù)教程
這篇文章主要為大家詳細介紹了Vue組件庫ElementUI實現(xiàn)表格加載樹形數(shù)據(jù)教程,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-06-06Vue使用Three.js創(chuàng)建交互式3D場景的全過程
在現(xiàn)代Web開發(fā)中,通過在頁面中嵌入3D場景,可以為用戶提供更加豐富和交互性的體驗,Three.js是一款強大的3D JavaScript庫,它簡化了在瀏覽器中創(chuàng)建復雜3D場景的過程,本文將介紹如何在Vue中使用Three.js,創(chuàng)建一個簡單的交互式3D場景,需要的朋友可以參考下2023-11-11