vue3-auth-code-input

这是一个基于 Vue 3 和 TypeScript 开发的验证码输入组件，适用于需要用户输入验证码的场景。它提供了灵活的配置选项，以适应不同的需求。

功能特点

• 支持文本和数字类型验证码。
• 自定义验证码长度。
• 支持自定义宽度、高度、边框颜色等样式。
• 支持发送验证码倒计时显示。
• 可以自定义发送验证码按钮的文本和颜色。
• 支持粘贴板自动填充验证码。
• 支持自定义类名。
• 支持自定义插槽。

Get Start

npm install vue3-auth-code-input

Props 属性说明

| 属性名 | 类型 | 默认值 | 描述 | | ------------------ | ---------------- | ------ | -------------------------------------- | | width | string | number | - | 组件宽度,单位：px | | height | string | number | - | 组件高度,单位：px | | v-model:code | string | number | - | 验证码值 | | codeHeight | string | number | 40 | 验证码输入框高度,单位：px | | length | number | 6 | 验证码长度,最少4位 | | type | 'text' | 'number' | 'text' | 验证码类型 | | title | string | - | 标题文本 | | contentText | string | - | 内容文本 | | card | boolean | false | 是否以卡片形式展示 | | borderColor | string | #F1F1F1 | 边框颜色 | | activeBorderColor | string | #007AFF | 激活状态下的边框颜色 | | color | string | #333333 | 文字颜色 | | fontSize | string | number | 12 | 字体大小,单位：px | | customName | string | input-group-user | 自定义类名 | | customItemName | string | input-item-user | 自定义验证码输入项的类名 | | sendText | string | 发送验证码 | 发送验证码按钮的文本 | | sendBtnColor | string | #007AFF | 发送验证码按钮的颜色 | | sendCountDown | number | 120 | 发送验证码的倒计时 | | mobile | string | - | 手机号，用于发送验证码，有值时显示传入手机号和按钮 |

slot

以下是组件提供的插槽及其描述：

| Name | Description | | ------------- | ------------------------ | | header | 自定义组件头部区域。 | | content-text| 自定义内容文本区域。 | | send | 自定义发送验证码按钮区域。 |

event

| 事件名 | 描述 | type | | ------------------ | -------------------------------------- | -------------------------------------- | | update:code | 当验证码输入更新时触发，返回最新的验证码值。 | (code: string \| number) => void | | send | 点击发送验证码按钮时触发，返回手机号码。 | (mobile: string) => void |

Ref 方法

当需要从父组件调用子组件的方法时，请使用 ref 引用。以下是可用的 ref 方法：

| 方法名 | 描述 | 参数 | | ------------------ | -------------------------------------- | ---------------------------------- | | resetSendButton | 重置发送验证码按钮和倒计时，使其可以再次点击。 | newCountDown?: number (可选) |

Example 示例

<template>
  <div>
    <sms-code ref="smsCodeRef" card title="温馨提示" content-text="请获取验证码后填写短信验证码。" mobile="159****8383" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { SmsCode, type ISmsCodeComponentInstance  } from 'vue3-auth-code-input';

const smsCodeRef = ref<ISmsCodeComponentInstance | null>(null);

const resetTheButton = () => {
  smsCodeRef.value!.resetSendButton(60); // 60秒的新倒计时时间
};
</script>