init

pc/components/verification-code/index.vue

@@ -0,0 +1,79 @@
+<template>
+    <ElButton v-if="!isStart" @click="handlStart" link>
+        {{ isRetry ? endText : startText }}
+    </ElButton>
+    <VueCountdown
+        v-else
+        ref="vueCountdownRef"
+        :time="seconds * 1000"
+        v-slot="{ totalSeconds }"
+        @end="handleEnd"
+    >
+        {{ getChangeText(totalSeconds) }}
+    </VueCountdown>
+</template>
+<script lang="ts">
+import VueCountdown from '@chenfengyuan/vue-countdown'
+import { useThrottleFn } from '@vueuse/core'
+import { ElButton } from 'element-plus'
+export default defineComponent({
+    components: {
+        VueCountdown,
+        ElButton
+    },
+    props: {
+        // 倒计时总秒数
+        seconds: {
+            type: Number,
+            default: 60
+        },
+        // 尚未开始时提示
+        startText: {
+            type: String,
+            default: '获取验证码'
+        },
+        // 正在倒计时中的提示
+        changeText: {
+            type: String,
+            default: 'x秒重新获取'
+        },
+        // 倒计时结束时的提示
+        endText: {
+            type: String,
+            default: '重新获取'
+        }
+    },
+    emits: ['click-get'],
+    setup(props, { emit }) {
+        const isStart = ref(false)
+        const isRetry = ref(false)
+        const start = async () => {
+            isStart.value = true
+        }
+
+        const getChangeText = (second) => {
+            return props.changeText.replace('x', second)
+        }
+        const handleEnd = () => {
+            isStart.value = false
+            isRetry.value = true
+        }
+        const handlStart = useThrottleFn(
+            () => {
+                emit('click-get')
+            },
+            1000,
+            false
+        )
+        return {
+            getChangeText,
+            isStart,
+            start,
+            isRetry,
+            handleEnd,
+            handlStart
+        }
+    }
+})
+</script>
+<style lang="scss" scoped></style>