update

src/components/HelloWorld.vue

@@ -1,43 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

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>