SendCode 发送验证码

代码演示

基础用法

<template>
    <div>
        <x-send-code ref="sendCodeRef">
            <template #default="{ running, seconds, disabled }">
                <a-button
                    :disabled="disabled"
                    @click="handleSend">
                    <template v-if="running">{{ seconds }}s 后重新获取</template>
                    <template v-else>发送验证码</template>
                </a-button>
            </template>
        </x-send-code>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const sendCodeRef = ref()

function handleSend() {
    sendCodeRef.value.start()
}
</script>

<style lang="less" scoped></style>

重置

<template>
    <div>
        <a-space>
            <x-send-code ref="sendCodeRef">
                <template #default="{ running, seconds, disabled }">
                    <a-button
                        :disabled="disabled"
                        @click="handleSend">
                        <template v-if="running">{{ seconds }}s 后重新获取</template>
                        <template v-else>发送验证码</template>
                    </a-button>
                </template>
            </x-send-code>
            <template v-if="allowReset">
                <a-button @click="handleReset">重置</a-button>
            </template>
        </a-space>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const sendCodeRef = ref()
const allowReset = ref(false)

function handleSend() {
    sendCodeRef.value.start()
    allowReset.value = true
}

function handleReset() {
    sendCodeRef.value.reset()
    allowReset.value = false
}
</script>

<style lang="less" scoped></style>

自定义

<template>
    <div>
        <a-input :style="{ width: '260px' }">
            <template #suffix>
                <x-send-code
                    ref="sendCodeRef"
                    :seconds="10">
                    <template #default="{ running, seconds }">
                        <template v-if="running">{{ seconds }}s 后重新获取</template>
                        <template v-else>
                            <a @click="handleSend"> 发送验证码 </a>
                        </template>
                    </template>
                </x-send-code>
            </template>
        </a-input>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const sendCodeRef = ref()

function handleSend() {
    sendCodeRef.value.start()
}
</script>

<style lang="less" scoped></style>

API

Props

参数	说明	类型	默认值
seconds（v-model）	计时时长	number	60

Events

事件名	说明	回调参数
change	计时发生改变	seconds: number
start	计时开始	-
end	计时结束	-
reset	重置计时	-

Methods

通过 ref 可以获取到 SendCode 实例并调用实例方法。

方法名	说明	参数	返回值
start	开始计时	-	-
reset	重置	-	-

Slots

名称	说明	参数
default	默认插槽	{seconds: number, running: boolean, disabled: boolean}