支付宝小程序扩展表单 验证码输入框·VerifyCode
2020-09-18 11:22 更新
验证码输入框。
受控模式,使用时需要用 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 时,组件在初次加载后就会自动进入倒计时状态;如需要在该状态下有提示信息展示,需自行处理。
以上内容是否对您有帮助:
更多建议: