SendCode 发送验证码

代码演示

基础用法

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

const sendCodeRef = ref()

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

<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>

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

重置

<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>

<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>

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

自定义

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

const sendCodeRef = ref()

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

<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>

<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}