Skip to main content
Version: v2

send captcha

strategy type

use hook

Before using extension hooks, make sure you are familiar with the basic usage of alova.

The verification code sending hook saves you the trouble of developing the verification code sending function.

Example

Send Captcha Demo

Features

  • The countdown will start automatically after the verification code is sent;
  • Custom countdown seconds;
  • Verification code sending limit;

Install

# npm
npm install @alova/scene-vue --save
#yarn
yarn add @alova/scene-vue

use

Basic usage

Demonstrates basic use of form hooks.

<template>
<input v-model="mobile" />
<button
@click="sendCaptcha"
:loading="sending"
:disabled="sending || countdown > 0">
{{ loading ? 'Sending...' : countdown > 0 ? `${countdown} can be resent` : 'Send
verification code' }}
</button>
</template>

<script setup>
import { ref } from 'vue';
import { apiSendCaptcha } from './api.js';
import { useCaptcha } from '@alova/scene-vue';

const mobile = ref('');
const {
// send status
loading: sending,

// Call sendCaptcha to request the interface to send the verification code
send: sendCaptcha
} = useCaptcha(() => apiSendCaptcha(mobile.value));
</script>

By default, after the verification code is successfully sent, it will count down for 60 seconds, and calling send when the countdown is not over will throw an error.

Custom countdown seconds

You can also customize the countdown seconds

useCaptcha(() => apiSendCaptcha(mobile.value), {
//...
// Set the countdown to 20 seconds
initialCountdown: 20
});

API

Hook configuration

Inherit all configurations of useRequest except immediate, immediate in useCaptcha has been hard-coded to false.

NameDescriptionTypeDefaultVersion
initialCountdownInitial countdown, when the verification code is sent successfully, it will start countdown with this datanumber60-

Responsive data

Inherit all responsive data from useRequest.

NameDescriptionTypeVersion
countdownThe current countdown, -1 per second, the verification code can only be sent again after the countdown endsnumber-

Action function

Inherit all action functions of useRequest.

namedescriptionfunction parametersreturn valueversion
sendSend a request, when the countdown is not over, the call will throw an errorConsistent with useRequest.sendPromise<Response>-

Event

Inherit all events from useRequest.