vue3验证码倒计时60秒（自用）

1.   

                v-bind:disabled="obj.dis" type="primary"

                @click="obtain()">

          发送验证码

          重新发送{{obj.count}}s

     

2. setup(){

 let obj = reactive({

      dis: false,

      show: true,

      isGrey: false, //按钮样式

      timer: null, //设置计时器,

      count: ""

    });

}

3.  

   //点击获取验证码：

    function obtain() {

      const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;

      if (obj.phone == "" || obj.phone.length <= 10 || !reg.test(obj.phone)) {

        ElMessage("请填写正确的手机号！！");

        return;

      } else {

      let mins = 60

      if (!obj.timer) {

        obj.count = mins;

        obj.isGrey = true;

        obj.show = false;

        obj.dis = true;

        obj.timer = setInterval(() => {

          if (obj.count > 0 && obj.count <= mins) {

            obj.count--;

          } else {

            obj.dis = false;

            obj.isGrey = false;

            obj.show = true;

            clearInterval(obj.timer);

            obj.timer = null;

          }

        }, 1000);

      }

    //此处为接口 

       let formData = new FormData();

        formData.append('phone',obj.phone)

        Axios({

          method: "post",

          url: "/sms/send",

          params: formData,

        }).then((res) => {

          console.log(res, "66666");

          ElMessage(res.data.message);

        });

      }

    }

 点击获取验证码 60秒后可再次点击