@mas.io/mas-verify-sms NPM

安装

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

@mas.io/falcon-core

@infinitebrahmanuniverse/nolb-_mas @everything-registry/sub-chunk-583

1.1.2

3 years ago