vue3实现短信验证码组件

十月不到底2025-12-10 13:16

短信验证码

基础用法

vue 复制代码

<sms-code :before-click="handleBeforeCode" :on-success="handleSuccess" style="margin-left: 10px"></sms-code>

html 复制代码

<div style="width: 100%; display: flex; flex-wrap: nowrap; align-items: center">
    <el-input v-model="forms.smsCode" clearable placeholder="请输入验证码" maxlength="6" />
    <sms-code :before-click="handleBeforeCode" style="--btn-height: 30px;margin-left: 10px"></sms-code>
</div>

js 复制代码

// 场景一：发送验证码前需要验证表单字段
const handleBeforeCode = async () => {
    return new Promise((resolve, reject) => {
        formRef1.value.validateField(["phone"], async (valid, fields) => {
            if (valid) {
                // 发送短信接口参数
                let data = {
                    phone: forms.value.phone,
                    type: "2",
                };
                resolve(data);
            }
        });
    });
};
// 场景二：不需要验证表单直接发送
const handleBeforeCode = async () => {
    return {
        phone: forms.value.phone,
        type: "2",
    };
};
// 监听发送成功回调
const handleSuccess = (res) => {
    if (res && res.code == "0") {
        console.log("短信发送成功！");
    } else if (res && res.code != "0") {
        console.log("短信发送失败！");
    }
};

属性名	说明	类型	默认值	可选值
type	类型	`string`	button	text
time	倒计时时间	`Number`	60
isVertify	是否安全验证	`boolean`	true
before-click	发送验证码前的回调函数	`Function`	---
on-success	发送成功的回调函数	`Function`	---
--style	----------------------	----------	------	------
--btn-width	按钮宽度	-	---
--btn-height	按钮高度	-	---
--btn-bg-color	按钮背景颜色	-	---
--btn-text-color	按钮文字颜色	-	---

组件代码

创建组件时，在components目录下创建SmsCode文件夹，然后创建index.vue粘贴组件代码

组件代码里包含了滑块安全验证组件，详细使用参考滑块安全验证组件