update

src/components/VerificationCode/index.vue

@@ -0,0 +1,53 @@
+<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>