支付寶小程序擴(kuò)展表單 驗證碼輸入框·VerifyCode

驗證碼輸入框。

受控模式，使用時需要用 onInput 事件來回設(shè) 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,
    });
  },
});

屬性

Bug & Tip

• 當(dāng) initActive 為 true 時，組件在初次加載后就會自動進(jìn)入倒計時狀態(tài)；如需要在該狀態(tài)下有提示信息展示，需自行處理。