80 lines
1.9 KiB
Vue
80 lines
1.9 KiB
Vue
|
<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>
|