Vue + Elementui 实现登录页 手机验证码、倒计时等功能

Vue + Elementui 实现登录页 手机验证码、倒计时等功能

点击打开视频讲解 更加详细

<template>   <div id="app">     <div class="left">用代码改变世界</div>     <el-form       class="content"       ref="refForm"       :rules="rules"       :model="passwordResetForm"       label-width="85px"     >       <el-form-item prop="accout" label="账 号：">         <el-input           size="small"           clearable           v-model="passwordResetForm.accout"           placeholder="输入账号"           prefix-icon="el-icon-user"         >         </el-input>       </el-form-item>       <el-form-item prop="password" label="密 码：">         <el-input           size="small"           type="password"           maxlength="16"           clearable           v-model="passwordResetForm.password"           prefix-icon="el-icon-lock"           placeholder="输入密码"         ></el-input>       </el-form-item>       <el-form-item prop="checkCode" label="验证码：" class="checkCode">         <el-input           size="small"           clearable           v-model="passwordResetForm.checkCode"           placeholder="输入验证码"         ></el-input>         <el-button           @click.stop="sendVerificationCode"           size="mini"           type="primary"           style="margin-left: 10px"           v-if="show"           >发送验证码</el-button         >         <el-button           size="mini"           type="primary"           style="margin-left: 10px"           v-if="!show"           disabled           >{{ count }}秒后重发</el-button         >       </el-form-item>       <div class="sign">         <el-button @click.stop="sign" type="primary">登 录</el-button>       </div>     </el-form>     <div class="right">用歌曲祭奠青春</div>   </div> </template> <script> import axios from "axios"; export default {   name: "home",   data() {     return {       passwordResetForm: {         accout: "",         password: "",         checkCode: "",       },       rules: {         accout: [{ required: true, message: "账号不能为空", trigger: "blur" }],         password: [           { required: true, message: "密码不能为空", trigger: "blur" },           {             trigger: "blur",             validator: (rule, value, callback) => {               let passwordreg =                 /(?=.*d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,16}/;               if (!passwordreg.test(value)) {                 callback(                   new Error("密码必须由数字、字母、特殊字符组合,请输入8-16位")                 );               } else {                 callback();               }             },           },         ],         checkCode: [           { required: true, message: "验证码不能为空", trigger: "blur" },           { max: 4, message: "验证码为4位数字", trigger: "blur" },         ],       },       show: true,       count: "",       timer: null,     };   },   mounted() {},   methods: {     //验证码 倒计时     sendVerificationCode() {       let TIME_COUNT = 60;       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);         this.getCode();       }     },     //验证码     getCode() {       axios.get("/verificationCode.json").then((res) => {         if (res.status == 200) {           setTimeout(() => {             this.passwordResetForm.checkCode = res.data.code;             this.show = true;             clearInterval(this.timer);             this.timer = null;           }, 3000);         }       });     },     //登录     sign() {       this.$refs["refForm"].validate((valid) => {         if (valid) {           this.$message({             type: "success",             message: "登录成功了哎！",           });         } else {           console.log("error submit!!");           return false;         }       });     },   }, }; </script>  <style scoped> #app {   width: 100%;   height: calc(100vh - 0px);   background-image: url(../assets/moment.jpg);   /* 设置图片宽、高 */   background-size: 100% 100%;   /*按比例缩放*/   background-repeat: no-repeat; } .content {   width: 300px;   position: absolute;   top: 50%;   left: 50%;   transform: translate(-50%, -50%);   padding: 22px 30px;   box-shadow: 0 0 10px 5px #19a2d0 inset; } .checkCode ::v-deep .el-form-item__content {   display: flex;   align-items: center;   justify-content: space-around; } ::v-deep .el-form-item__label {   font-size: 18px;   font-weight: bold;   padding: 0 0 0 0;   color: #fff;   text-align: left; } .sign > button {   width: 100%;   font-size: 18px; } .left {   width: 10px;   font-size: 40px;   font-weight: bold;   color: #fff;   position: absolute;   top: 50%;   left: 25%;   transform: translate(-50%, -50%); } .right {   width: 10px;   font-size: 40px;   font-weight: bold;   color: #fff;   position: absolute;   top: 50%;   left: 75%;   transform: translate(-50%, -50%); } </style> 

效果图：

若对您有帮助，请点击跳转到B站一键三连哦！感谢支持！！！