支付宝小程序扩展表单 验证码输入框·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 时,组件在初次加载后就会自动进入倒计时状态;如需要在该状态下有提示信息展示,需自行处理。
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号