# yuSmsField 短信验证组件
TIP
组件自带验证码倒计时功能，通过当前系统时间为维度进行动态计算时间差, 解决iOS或安卓切换后台,js进程被挂起,倒计时中止的问题。
短信验证组件,倒计时
# 效果预览
<template>
<yu-sms-field ref="smsField" smsCount="60" @getCode="getCodeFn" :smsSendNo="smsSendNo"></yu-sms-field>
<template>
<script>
import yuSmsField from '@/components/yu-sms-field/index.vue';
export default {
components: {
yuSmsField
},
data() {
return: {
smsSendNo: ''
}
},
methods: {
getCodeFn() {
// todo:request
this.$refs.smsField.smsCountDown();
this.$toast('短信验证码已发送至132****3126');
this.smsSendNo = '3409'
}
},
}
</script>
# Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | 标题 | String | - | 短信验证码 |
| smsCount | 倒计时时间长度 | string | - | 60 |
| placeholder | 输入框提示 | string | - | 请输入短信验证码 |
| isSmsSendNo | 是否显示短信序列号 | Boolean | - | true |
| smsSendNo | 短信验证序列号 | String | - | - |
| btnTxt | 输入域右侧按钮文字内容 | String | - | 获取 |
# events
| 方法名 | 说明 | 参数 |
|---|---|---|
| getCode | 点击右侧按钮触发事件 |
# methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| smsCountDown | 开启倒计时 | - |