vue实现手机验证码登录(基于娱乐系统项目),高级前端都应该知道

51 阅读3分钟

刷面试题

刷题的重要性,不用多说。对于应届生或工作年限不长的人来说,刷面试题一方面能够尽可能地快速自己对某个技术点的理解,另一方面在面试时,有一定几率被问到相同或相似题,另外或多或少也能够为自己面试增加一些自信心,可见适当的刷题是很有必要的。

  • 前端字节跳动真题解析

  • 【269页】前端大厂面试题宝典

最后平时要进行自我分析与评价,做好职业规划,不断摸索,提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难,摆好心态,做好准备,你也可以的。 开源分享:docs.qq.com/doc/DSmRnRG…

<span v-show="sendAuthCode" class="auth_text auth_text_blue" @click="getAuthCode">获取验证码

{{auth_time}}

秒之后重新发送验证码

<el-button type="success" class="submitBtn" round @click.native.prevent="submit" :loading="logining">

注册


已经有账号,马上去登录

.regform { margin: 20px auto; width: 310px; background: #fff; box-shadow: 0 0 10px #b4bccc; padding: 30px 30px 0 30px; border-radius: 25px; } .submitBtn { width: 65%; } .to { color: #fa5555; cursor: pointer; } .auth_input { width: 140px; height: 38px; margin-bottom: 20px; border: 1px solid #dcdfe6; /* color:red; */ padding-left: 10px; border-radius: 8%; } .regform[data-v-92def6b0] { width: 370px; min-height: 440px; } .login-text { text-align: center; margin-bottom: 20px; }

30s倒计时

<button class="close_tel" v-show="show" @click="getCode">获取验证码

重新获取({{count}}s)

getCode() {

const TIME_COUNT = 30

if (!this.timer) {

this.count = TIME_COUNT

this.show = false

this.timer = setInterval(() => {

if (this.count > 0 && this.count <= TIME_COUNT) {

this.count--

} else {

this.show = true

clearInterval(this.timer)

this.timer = null

}

}, 1000)

}

},

二、自己写

* { margin: 0; padding: 0; } input { flex: 1; } a { cursor: pointer; } .phone { width: 220px; display: block; margin: 0 auto; font-size: 16px; /* color: #666; */ outline: none; padding-top: 30px; border-left: none; border-right: none; border-top: none; border-bottom: 0.1px solid rgb(196, 194, 194); position: relative; } .close_tel { font-size: 12px; width: 100px; height: 23px; line-height: 25px; border-radius: 5px; background-color: rgb(86, 159, 255); color: white; position: absolute; right: 20%; top: 255px; outline: none; border: 0; font-weight: 400; cursor: pointer; } .close_tel2 { font-size: 12px; width: 100px; height: 23px; line-height: 25px; border-radius: 5px; background-color: rgb(211, 211, 211); color: white; position: absolute; right: 20%; top: 255px; outline: none; border: 0; font-weight: 400; cursor: pointer; } .login { ### 刷面试题 刷题的重要性,不用多说。对于应届生或工作年限不长的人来说,刷面试题一方面能够尽可能地快速自己对某个技术点的理解,另一方面在面试时,有一定几率被问到相同或相似题,另外或多或少也能够为自己面试增加一些自信心,可见适当的刷题是很有必要的。 **[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)** * **前端字节跳动真题解析** ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8fc4a1b2e72941cfb87b690472cc9882~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771930379&x-signature=b0VWsYiNwECLtCN9vbJIVBTjyVo%3D) * **【269页】前端大厂面试题宝典** ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/701b6fb7b01643f1b815cb6c1b3468ae~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771930379&x-signature=RfA1kdlpvwPPzydT9xl3XUzuma4%3D) 最后平时要进行自我分析与评价,做好职业规划,不断摸索,提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难,摆好心态,做好准备,你也可以的。