cv-code-sms 短信验证码 ¶

简要 ¶

验证码，一般和表单配合使用，默认为实心白色背景。

HttpObj 插件查看网络请求

示例 ¶

vue

<template>
  <view class="content">
    <view class="components-title">
      <view class="components-title-t">cv-code-sms</view>
      <view class="components-title-d">短信验证</view>
    </view>
    <view>默认label</view>
    <cv-form-base ref="refFormBase">
      <cv-form-item label="验证码">
        <cv-code-sms v-model="formData.code" />
      </cv-form-item>
      <cv-form-item label="验证码">
        <cv-code-sms v-model="formData.code" mobile="" />
      </cv-form-item>
      <cv-form-item label="验证码">
        <cv-code-sms v-model="formData.sms_code" mobile="15060007000" :apiFunc="handleSmsSend" />
      </cv-form-item>
      <cv-form-item label="验证码">
        <cv-code-sms v-model="formData.code" mobile="19965990588" waitTime="6" :apiFunc="handleSmsSend" />
      </cv-form-item>
    </cv-form-base>
  </view>
</template>

<script>
import HttpObj from '@/plugins/http.js';

export default {
  data() {
    return {
      formData: {
        code: '',
        sms_code: ''
      }
    };
  },
  onLoad() {
    setTimeout(() => {
      this.$testReqMock().then((res) => {
        this.formData.code = '';
      });
      console.log('模拟请求数据', this.formData);
    }, 1000);
  },
  methods: {
    handleSmsSend(xxx) {
      return uni.request({
        url: 'http://10yun.host/xxxx',
        data: {
          ...xxx
        }
      });
      // HttpObj.flagPost('SDK_SMS_COMMON_SMS_SEND')
    }
  }
};
</script>

属性 ¶

属性名	类型	默认值	说明
v-model	String	-	数据双向绑定
disabled	String	false	是否禁止
maxlength	String	-1	验证码长度
mobile	String	-	发送的手机号码
mobileParam	String	mobile	发送手机号字段给后台接受的字段
codeSign	Boolean	false	短信识别码
apiFunc	Function	-	验证码请求函数
waitTime	String	60	验证码发送成功后等待时间（s）