支付宝小程序扩展表单 验证码输入框·VerifyCode
验证码输入框。
受控模式，使用时需要用 onInput 事件来回设 value。
扫码体验
示例代码
{
"defaultTitle": "Verify-code",
"usingComponents": {
"verify-code": "mini-ali-ui/es/verify-code/index"
}
}<view>
<view style="margin-top: 10px;" />
<view style="padding: 0 10px;">验证码框</view>
<view style="margin-top: 10px;" />
<verify-code
onInput="onInput"
value="{{verifyCode}}"
onClear="onClear"
last="{{true}}"
countDown="{{10}}"
initActive="{{false}}"
onSend="onSend"></verify-code>
</view>Page({
data: {
verifyCode: '',
},
onSend() {
my.alert({
title: 'verify code sent',
});
},
onInput(e) {
this.setData({
verifyCode: e.detail.value,
});
},
});属性
| 属性 | 类型 | 默认值 | 描述 | 最低版本 |
|---|---|---|---|---|
| className | String | - | 自定义的 class。 | - |
| label | String | 验证码 | 自定义 label 文案。 | - |
| labelCls | String | - | 自定义 label 的 class。 | - |
| inputCls | String | - | 自定义 input 的 class | - |
| last | Boolean | false | 是否为最后一行。 | - |
| value | String | - | 输入框值。 | - |
| name | String | - | 组件名字，用于表单提交获取数据。 | - |
| placeholder | String | - | 占位符。 | - |
| placeholderStyle | String | - | 指定 placeholder 的样式。 | - |
| placeholderClass | String | - | 指定 placeholder 的样式类。 | - |
| disabled | Boolean | false | 是否禁用。 | - |
| maxlength | Number | 140 | 最大长度。 | - |
| focus | Boolean | false | 获取焦点。 | - |
| clear | Boolean | true | 是否带清除功能，仅 disabled 为 false 才生效。 | - |
| onInput | (e: Object) => void | - | 键盘输入时触发 input 事件。 | - |
| onConfirm | (e: Object) => void | - | 点击键盘完成时触发。 | - |
| onFocus | (e: Object) => void | - | 聚焦时触发。 | - |
| onBlur | (e: Object) => void | - | 失去焦点时触发。 | - |
| onClear | () => void | - | 点击清除 icon 时触发。 | - |
| txtSend | String | 发送验证码 | 发送按钮的默认文案 | 1.1.2 |
| txtSendAgain | String | 重发验证码 | 重发按钮的默认文案 | 1.1.2 |
| txtCountDown | String | 秒后重试 | 按钮倒计时的默认文案（不包含倒计时） | 1.1.2 |
| initActive | Boolean | false | 是否主动触发发送按钮。 | 1.1.3 |
Bug & Tip
- 当 initActive 为 true 时，组件在初次加载后就会自动进入倒计时状态；如需要在该状态下有提示信息展示，需自行处理。