cv-code-sms 短信验证

简要

type属性为text的input
带有发送短信按钮的验证码输入框，点击按钮会对传入的手机号进行格式预验证，通过触发onGetSms事件返回验证结果。 用于填写短信验证码
一般和表单配合使用，默认为实心白色背景。 mobile 用来绑定手机号

示例

::: demo

<template>
  <div style="width: 520px">
    <div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px">
      <h1>code 验证码组件</h1>
      <cv-form-base ref="refFormBase" :rules="formRules" :model="formData">
        <el-divider content-position="left">短信验证码</el-divider>
        <cv-form-item label="短信验证码">
          <cv-code-sms v-model="formData.codesms1" :mobile="formData.phone" />
          <template #tip>绑定手机号获取验证码</template>
        </cv-form-item>
        <el-divider content-position="left">手机号</el-divider>
        <cv-form-item label="短信验证码">
          <cv-input-mobile v-model="formData.phone1" />
        </cv-form-item>
        <cv-form-item label="">
          <cv-code-sms @onGetSms="onGetSms" v-model="formData.codesms" maxlength="4" :mobile="formData.phone1" :waitTime="50" />
          <template #tip>验证码最大长度为4，等待50秒</template>
        </cv-form-item>
        <cv-form-item label="">
          <cvCodeSms
            @onGetSms="onGetSms"
            v-model="formData.codesms"
            maxlength="4"
            :mobile="formData.phone1"
            :apiFunc="$request.urlPost('sdk_sms/common/sms_send')"
          />
          <template #tip>绑定apiFunc</template>
        </cv-form-item>
        <el-divider content-position="left">图形验证码</el-divider>
      </cv-form-base>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formRules: {},
      formData: {
        phone1: 13800000000,
        phone1: '',
        codesms: '',
        codesms1: '',
        codesms2: '',
        phone1: '13912341234',
        phone2: '13912341234'
      }
    };
  },
  methods: {
    hanldeSubmit() {
      console.log('baseForm的数据', this.formData);
    },
    onGetSms(state) {
      console.log('手机号预验证是否通过：', state);
    }
  }
};
</script>

:::

属性

属性名	类型	默认值	说明	可选值
placeholder	String	-	输入框占位文本	-
disabled	Boolen	false	是否禁止	-
v-model	String	-	数据双向绑定	-
size	String	-	尺寸	medium / small / mini
clearable	boolean	true	清空按钮	-
mobile	Number	-	手机号	-
waitTime	Number	60	短信发送间隔,发送成功后按钮禁用间隔（秒）	-
maxlength	Number	-	验证码长度，默认6	-

事件

事件名	参数	说明
onGetSms	state	返回参数为短信发送状态，true 或 false