可以封装一个获取验证码倒计时的方法,示例如下:

```javascript

/**

* 获取验证码倒计时

* @param {Object} vm vue实例对象

* @param {Number} time 倒计时时长(单位:秒)

* @param {String} btnText 按钮文本(默认为"获取验证码")

*/

function getVerifyCode(vm, time, btnText = "获取验证码") {

  let timer = null;

  let count = time;

  vm.verifyCodeText = `${count}秒后重新获取`;

  vm.verifyCodeDisabled = true;

  timer = setInterval(() => {

    count--;

    if (count <= 0) {

      clearInterval(timer);

      vm.verifyCodeText = btnText;

      vm.verifyCodeDisabled = false;

    } else {

      vm.verifyCodeText = `${count}秒后重新获取`;

    }

  }, 1000);

}

```

这个方法接受三个参数:

- `vm`:vue实例对象,用于修改页面上的数据;

- `time`:倒计时时长,单位为秒;

- `btnText`:按钮文本,默认为"获取验证码"。

使用方法示例如下:

```javascript

// 在vue组件中使用示例:

export default {

  data() {

    return {

      verifyCodeText: "获取验证码",

      verifyCodeDisabled: false

    };

  },

  methods: {

    handleGetVerifyCode() {

      // 调用获取验证码接口,等待接口返回结果

      // 如果接口返回成功,则开始倒计时

      getVerifyCode(this, 60);

    }

  }

};

```

这样就可以在页面上实现获取验证码倒计时的效果了。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐