这是一个基于 Vue 3 和 TypeScript 开发的验证码输入组件,适用于需要用户输入验证码的场景。它提供了灵活的配置选项,以适应不同的需求。
- 支持文本和数字类型验证码。
- 自定义验证码长度。
- 支持自定义宽度、高度、边框颜色等样式。
- 支持发送验证码倒计时显示。
- 可以自定义发送验证码按钮的文本和颜色。
- 支持粘贴板自动填充验证码。
- 支持自定义类名。
- 支持自定义插槽。
npm install vue3-auth-code-input
属性名 | 类型 | 默认值 | 描述 |
---|---|---|---|
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 | - | 手机号,用于发送验证码,有值时显示传入手机号和按钮 |
以下是组件提供的插槽及其描述:
Name | Description |
---|---|
header |
自定义组件头部区域。 |
content-text |
自定义内容文本区域。 |
send |
自定义发送验证码按钮区域。 |
事件名 | 描述 | type |
---|---|---|
update:code |
当验证码输入更新时触发,返回最新的验证码值。 | (code: string | number) => void |
send |
点击发送验证码按钮时触发,返回手机号码。 | (mobile: string) => void |
当需要从父组件调用子组件的方法时,请使用 ref
引用。以下是可用的 ref
方法:
方法名 | 描述 | 参数 |
---|---|---|
resetSendButton |
重置发送验证码按钮和倒计时,使其可以再次点击。 | newCountDown?: number (可选) |
<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>