一、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';
           }
         },
         }
     }