Captcha 验证码输入框 ​

考虑到用户实际发送验证码的场景，可能是一个按钮，也可能是一段文字，提示语各有不同，所以本组件 不提供界面显示，只提供提示语，由用户将提示语嵌入到具体的场景。

基本使用 ​

通过ref获取组件对象，再执行后面的操作，见下方示例。

1. 通过duration设置需要倒计的秒数(默认60s)
2. 通过ref调用组件内部的start方法，开始倒计时
3. 通过v-model:text(从开始到结束之间，每秒触发一次)获得提示的文字，可能值如"获取验证码|12秒后重新获取|重新获取"，可以自定义

注意：用户可能在倒计时的过程中点击获取验证码的按钮，组件内部提供了通过ref获取的disabled变量，在 倒计时 过程中，该值为true，如果为true应该给予提示并不要再次向后端请求验证码，如果为false，则为 获取验证码 之前，或者倒计结束之后，可以再次向后端请求验证码。

以下为完整示例，见如下：

<template>
    <el-card shadow="never">
        <Captcha
            ref="captchaRef"
            v-model:disabled="state.disabled"
            v-model:text="state.codeText"
            unique-key="login/phone"
            keep-running
            :duration="60"
        />
        <el-button :disabled="state.disabled" type="primary" @click="handleGetCode">
            {{ state.codeText }}
        </el-button>
    </el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import Captcha from "@/components/captcha.vue";

const captchaRef = ref();
const state = reactive({ disabled: false, codeText: "" });

const handleGetCode = async () => {
    if (captchaRef.value.disabled) return;

    // 成功获取验证码
    // todo

    captchaRef.value.start();
};
</script>

<style scoped></style>

自定义提示语 ​

组件内部有内置的提示语，如获取验证码前的提示语为"获取验证码"，用户可以通过参数配置自定义的提示：

• 获取前，参数为start-text，默认值为"获取验证码"
• 倒计时期间，参数为change-text，默认为"{time}秒重新获取"，将会被倒计的秒数替代
• 倒计时结束，参数为end-text，默认值为"重新获取"

保持倒计时 ​

一般情况下，在H5刷新浏览器，或者各端返回再进入时，倒计时会消失，导致用户可以再次尝试获取验证码，虽然后端还会对此进行进一步的判断。 对于这种情况，可以设置keep-running参数(默认为false)，为true的时候，即使刷新浏览器，或者返回上一个页面， 倒计时依然会继续(如果还在倒计时间内的话)。

注意： 如果您的一个页面或者多个页面同时使用了多个此组件，为了防止多个组件之间，保存在本地的多个继续倒计时的变量之间互相干扰，可以配置 各个组件的unique-key为一个不重复的字符串，以作区分：

/* A.vue */
<Captcha unique-key="page-a"></Captcha>

/* B.vue */
<Captcha unique-key="page-b"></Captcha>

API ​

Props ​

Methods ​

需要通过ref获取验证码组件才能调用，见上方"基本使用"说明

Event ​