安装

tnpm install --save @alipay/mas-verify-sms

组件介绍

行业小程序短信验证码组件

参数说明

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 --|:--:|:--:|:--:|:--: | :-: className | 否 | string | 模块类名 | '' | 'custom' title | 否 | string | 标题 | '' | '输入验证码' verifyCodeLength | 否 | number | 验证码长度 4或者6 | 4 | 6 codeTime | 否 | number | 验证码倒计时 | 60 | 30 verifyCodeErrorMsg | 否 | string | 验证码错误提示，变更内容会初始化倒计时 | '' | '验证码错误' hasInitSendCode | 否 | boolean | 初始化时是否已发送验证码 | false | true focus | 否 | boolean | 是否在焦点上，原生键盘不支持唤起键盘 | false | true keyboardType | 是 | string | 键盘类型，默认default 原生键盘 | 'default' | 'custom' completedAndSubmit | 是 | boolean | 是否输入完成同时触发onSubmitCode方法, 并隐藏确认按钮， 默认false | false | true onCompleteCode | 否 | (value: string) => void | 验证码输入完成事件 | '' | onSendCode | 否 | () => void; | 点击发送/重新发送验证码时触发 | '' | onSubmitCode | 否 | (value: string) => void | 点击确认 | '' | onChangeCustomKeyBoard | 否 | (show: boolean) => void | 自定义键盘唤起事件 | '' |

特别说明

该组件监听了页面中的 `onMasReset` 方法，用于重置倒计时状态
Page({
  ...
  onLoad(){
    this.onMasReset()
  },
  /** 用于触发组件重置 */
  onMasReset() {}
}）

在小程序中使用

{
  "usingComponents": {
    "mas-xxxx": "@alipay/mas-verify-sms/es/index"
  }
}

在 page.axml 中引用组件

 <mas-verify-sms
    title="输入验证码"
    codeTime="{{ 10 }}"
    verifyCodeLength="{{ 4 }}"
    verifyCodeErrorMsg="{{ verifyCodeErrorMsg }}"
    onSendCode="sendVerifyCode"
    onSubmitCode="handleSubmitCode"
    focus="{{true}}"
    keyboardType="default"
    completedAndSubmit="{{ true }}"
  >
  <view class="verify-sms-info" slot="titleBottom">
    <view class="verify-sms-subTitle">我们已向所选油卡的预留手机号
      <text class="verify-sms-mobile">187****2286</text>
    </view>
    <view class="verify-sms-subTitle">发送验证码短信，请查看短信输入验证码 </view>
  </view>
</mas-verify-sms>

在 page/index.acss 中引入字体图标

.page-container {
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
}
.verify-sms-info {
  margin-top: 18rpx;
}
.verify-sms-subTitle {
  font-family: PingFangSC-Regular;
  font-size: 28rpx;
  color: #666666;
  line-height: 42rpx;
}

.verify-sms-mobile {
  color: #1677FF
}

page/index.js

Page({
  data: {
    verifyCodeErrorMsg: '',
  },
  onLoad() {},

  /**
   * 发送验证码
   */
  sendVerifyCode() {
    this.setData({
      verifyCodeErrorMsg: '',
    });
    // 调接口
  },

  /**
   * 得到验证码
   * @param {*} value
   */
  handleSubmitCode(value) {
    console.log(value, 'handleSubmitCode');
    my.showLoading({
      content: '加载中...',
      delay: '1000',
    });
    // 接口调用
    setTimeout(() => {
      this.setData({
        verifyCodeErrorMsg: '验证码错误，请重新输入',
      });
      my.hideLoading();
    }, 2000);
  },
});

Badges

[![install size][install-size-image]][install-size-url]