# CInputPhoneCode 手机验证码输入框组件 ## 功能说明 CInputPhoneCode 是一个手机验证码输入框组件,集成了验证码输入框和获取验证码按钮。按钮具有倒计时功能,防止用户频繁获取验证码。 ## 引用方式 ```js import { CInputPhoneCode } from '@components/forms/input'; ``` ## 组件参数 - `itemRes` (Object,必填):表单数据资源对象,表单组件内部机制专用 - `placeholder` (String,可选):输入框占位提示文本 - `autoStart` (Boolean,可选):验证码计时器开始方式,默认为 true - `true`:点击按钮后立即自动开始倒计时 - `false`:后台返回成功时才开始倒计时 - `onCallPhoneCode` (Function,必填):发送请求,通知后端给手机发送验证码的回调函数 - `onRefreshCD` (Function,可选):刷新倒计时后,通知父组件更新图片地址的回调函数 ## 实例方法 - `$resetHolding`:重置按钮的禁用状态,使按钮可以再次点击 ## 使用示例 ### 基础用法 ```html ``` ### 手动控制倒计时 ```html ``` ```js // 在需要重置倒计时的地方调用 this.$refs.phoneCode.$resetHolding(); ``` ## 注意事项 1. 组件内部包含一个 60 秒的倒计时,在倒计时结束前,获取验证码按钮将处于禁用状态 2. 当 `autoStart` 设置为 false 时,需要在 `onCallPhoneCode` 回调函数中手动调用传入的回调函数来开始倒计时 3. 通常需要在 `onCallPhoneCode` 回调中验证手机号是否有效,再决定是否发送验证码请求 4. 可以通过 `$resetHolding` 方法手动重置按钮状态,适用于特殊情况下需要提前结束倒计时的场景