54 lines
1.3 KiB
Vue
54 lines
1.3 KiB
Vue
|
<script setup>
|
||
|
|
import {ref, defineProps, defineModel} from 'vue';
|
||
|
|
import {Notification} from "@arco-design/web-vue";
|
||
|
|
|
||
|
|
const verificationCode = defineModel('verificationCode', {type: String});
|
||
|
|
const {phone} = defineProps({
|
||
|
|
phone: {
|
||
|
|
type: String,
|
||
|
|
default: null,
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const time = ref(null);
|
||
|
|
let timer = null;
|
||
|
|
|
||
|
|
const verifyPhone = () => {
|
||
|
|
if (/^1[3-9]\d{9}$/.test(phone)) {
|
||
|
|
if (timer === null) {
|
||
|
|
time.value = 10;
|
||
|
|
timer = setInterval(() => {
|
||
|
|
if (time.value <= 0) {
|
||
|
|
time.value = null;
|
||
|
|
clearInterval(timer);
|
||
|
|
timer = null;
|
||
|
|
} else {
|
||
|
|
time.value--;
|
||
|
|
}
|
||
|
|
}, 1000);
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
} else {
|
||
|
|
Notification.error({
|
||
|
|
title: '手机号错误',
|
||
|
|
content: '请检查后重新输入'
|
||
|
|
});
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<a-input :model-value="verificationCode" placeholder="验证码">
|
||
|
|
<template #append>
|
||
|
|
<a-link @click="verifyPhone" :disabled="Boolean(time)" :hoverable="false">
|
||
|
|
{{ time ? `${time}s后重新获取` : '发送验证码' }}
|
||
|
|
</a-link>
|
||
|
|
</template>
|
||
|
|
</a-input>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|