一、VUE+elementUI实现表单发送验证码倒计时方法二、显示密码

一、VUE+elementUI实现表单发送验证码倒计时方法

1. HTML代码部分

   <el-form-item label="邮箱"  prop="emaill">
   <el-input v-model="ruleform.emaill" autocomplete="off">
   <el-button slot="append" style="color: white;background-color: #3c8dbc"  v-show="showTime" @click="sendEmail(ruleform.emaill)">发送验证码</el-button>
   <el-button slot="append" style="color: white;background-color: #3c8dbc;margin-left: -20px"  v-show="!showTime" >{{sendTime}}秒</el-button>
   </el-input>
   </el-form-item>

2. script：

   export default {
   data: function () {
   
   return {
   showTime: true, /* 布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
   sendTime: '', /* 倒计时 计数器 */
   timer: null,
   },
   
   methods: {
   /*发送验证码时，开始计数，一分钟发送一次*/
   sendEmail(){
   
   const TIME_COUNT = 60; //  更改倒计时时间
   if (!this.timer) {
   this.sendTime = TIME_COUNT;
   this.showTime = false;
   this.timer = setInterval(() => {
   if (this.sendTime > 0 && this.sendTime <= TIME_COUNT) {
   this.sendTime--;
   } else {
   this.showTime = true;
   clearInterval(this.timer); // 清除定时器
   this.timer = null;
   }
   }, 1000);
   }
   }
   }
   }

二、是否显示密码

1. HTML部分

   <el-form-item label="密码" :label-width="formLabelWidth"  prop="password">
   <el-input  id="pwd" type="password" v-model="ruleform.password" autocomplete="off" >
   <i slot="suffix" class="el-input__icon el-icon-view el-show" @click="showPwd"></i>
   </el-input>
   </el-form-item>

2. script

   export default {
   data: function () {
   
   return {
   ruleform: {
   emaill: '',
   checkword: '',
   password: '',
   checkpassword: '',
   },
   },
   
   methods: {
   // 是否显示密码
   showPwd() {
   const input = document.getElementById('pwd');
   if (input.type === 'password') {
   input.type = 'text';
   } else if (input.type === 'text') {
   input.type = 'password';
   }
   },
   }
   }

• 点赞
• 收藏
• 分享
• 文章举报