-
Notifications
You must be signed in to change notification settings - Fork 834
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(countdown): move to script setup (#3018)
- Loading branch information
Showing
11 changed files
with
478 additions
and
568 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -703,6 +703,7 @@ | |
{ | ||
"name": "Countdown", | ||
"cName": "倒计时", | ||
"setup": true, | ||
"desc": "倒计时", | ||
"author": "yangxiaolu" | ||
}, | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,176 @@ | ||
<template> | ||
<view class="nut-countdown"> | ||
<slot> | ||
<view class="nut-countdown__content" v-html="renderTime"></view> | ||
</slot> | ||
</view> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { ref, computed, watch, onBeforeMount } from 'vue' | ||
import { getTimeStamp, formatRemainTime } from './util' | ||
defineOptions({ | ||
name: 'NutCountdown' | ||
}) | ||
export type CountdownProps = Partial<{ | ||
modelValue: Record<string, string> | ||
paused: boolean | ||
startTime: number | string | ||
endTime: number | string | ||
millisecond: boolean | ||
format: string | ||
autoStart: boolean | ||
time: number | string | ||
}> | ||
const props = withDefaults(defineProps<CountdownProps>(), { | ||
paused: false, | ||
startTime: '', | ||
endTime: '', | ||
millisecond: false, | ||
format: 'HH:mm:ss', | ||
autoStart: true, | ||
time: 0 | ||
}) | ||
const emit = defineEmits([ | ||
'input', | ||
'update:modelValue', | ||
'end', | ||
'restart', | ||
'paused', | ||
// will be deprecated | ||
'onEnd', | ||
'onRestart', | ||
'onPaused' | ||
]) | ||
// 倒计时剩余时间时间 | ||
const restTime = ref(0) | ||
const timer = ref<null | number>(null) | ||
const counting = ref(!props.paused && props.autoStart) | ||
const handleEndTime = ref(Date.now()) | ||
// 设置了 startTime 时,与 date.now() 的差异 | ||
const diffTime = ref(0) | ||
const renderTime = computed(() => { | ||
return formatRemainTime(restTime.value, props.format) | ||
}) | ||
// 倒计时 interval | ||
const initTime = () => { | ||
handleEndTime.value = Number(props.endTime) | ||
diffTime.value = Date.now() - getTimeStamp(props.startTime) // 时间差 | ||
if (!counting.value) counting.value = true | ||
tick() | ||
} | ||
const tick = () => { | ||
if (window !== undefined) { | ||
timer.value = requestAnimationFrame(() => { | ||
if (counting.value) { | ||
const currentTime = Date.now() - diffTime.value | ||
const remainTime = Math.max(handleEndTime.value - currentTime, 0) | ||
restTime.value = remainTime | ||
if (!remainTime) { | ||
counting.value = false | ||
pause() | ||
emit('end') | ||
emit('onEnd') | ||
} | ||
if (remainTime > 0) { | ||
tick() | ||
} | ||
} | ||
}) | ||
} | ||
} | ||
// 开始 | ||
const start = () => { | ||
if (!counting.value && !props.autoStart) { | ||
counting.value = true | ||
handleEndTime.value = Date.now() + Number(restTime.value) | ||
tick() | ||
emit('restart', restTime.value) | ||
emit('onRestart', restTime.value) | ||
} | ||
} | ||
// 暂定 | ||
const pause = () => { | ||
cancelAnimationFrame(timer.value!) | ||
counting.value = false | ||
emit('restart', restTime.value) | ||
emit('onRestart', restTime.value) | ||
} | ||
// 重置 | ||
const reset = () => { | ||
if (!props.autoStart) { | ||
pause() | ||
restTime.value = Number(props.time) | ||
} | ||
} | ||
defineExpose({ | ||
start, | ||
pause, | ||
reset | ||
}) | ||
onBeforeMount(() => { | ||
if (props.autoStart) { | ||
initTime() | ||
} else { | ||
restTime.value = Number(props.time) | ||
} | ||
}) | ||
watch( | ||
() => restTime.value, | ||
(value) => { | ||
const tranTime = formatRemainTime(value, props.format, 'custom') | ||
emit('update:modelValue', tranTime) | ||
emit('input', tranTime) | ||
} | ||
) | ||
watch( | ||
() => props.paused, | ||
(v, ov) => { | ||
if (!ov) { | ||
if (counting.value) { | ||
pause() | ||
} | ||
} else { | ||
if (!counting.value) { | ||
counting.value = true | ||
handleEndTime.value = Date.now() + Number(restTime.value) | ||
tick() | ||
} | ||
emit('restart', restTime.value) | ||
emit('onRestart', restTime.value) | ||
} | ||
} | ||
) | ||
watch( | ||
() => props.endTime, | ||
() => { | ||
initTime() | ||
} | ||
) | ||
watch( | ||
() => props.startTime, | ||
() => { | ||
initTime() | ||
} | ||
) | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,176 @@ | ||
<template> | ||
<view class="nut-countdown"> | ||
<slot> | ||
<view class="nut-countdown__content" v-html="renderTime"></view> | ||
</slot> | ||
</view> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { ref, computed, watch, onBeforeMount } from 'vue' | ||
import { getTimeStamp, formatRemainTime } from './util' | ||
defineOptions({ | ||
name: 'NutCountdown' | ||
}) | ||
export type CountdownProps = Partial<{ | ||
modelValue: Record<string, string> | ||
paused: boolean | ||
startTime: number | string | ||
endTime: number | string | ||
millisecond: boolean | ||
format: string | ||
autoStart: boolean | ||
time: number | string | ||
}> | ||
const props = withDefaults(defineProps<CountdownProps>(), { | ||
paused: false, | ||
startTime: '', | ||
endTime: '', | ||
millisecond: false, | ||
format: 'HH:mm:ss', | ||
autoStart: true, | ||
time: 0 | ||
}) | ||
const emit = defineEmits([ | ||
'input', | ||
'update:modelValue', | ||
'end', | ||
'restart', | ||
'paused', | ||
// will be deprecated | ||
'onEnd', | ||
'onRestart', | ||
'onPaused' | ||
]) | ||
// 倒计时剩余时间时间 | ||
const restTime = ref(0) | ||
const timer = ref<null | number>(null) | ||
const counting = ref(!props.paused && props.autoStart) | ||
const handleEndTime = ref(Date.now()) | ||
// 设置了 startTime 时,与 date.now() 的差异 | ||
const diffTime = ref(0) | ||
const renderTime = computed(() => { | ||
return formatRemainTime(restTime.value, props.format) | ||
}) | ||
// 倒计时 interval | ||
const initTime = () => { | ||
handleEndTime.value = Number(props.endTime) | ||
diffTime.value = Date.now() - getTimeStamp(props.startTime) // 时间差 | ||
if (!counting.value) counting.value = true | ||
tick() | ||
} | ||
const tick = () => { | ||
if (window !== undefined) { | ||
timer.value = requestAnimationFrame(() => { | ||
if (counting.value) { | ||
const currentTime = Date.now() - diffTime.value | ||
const remainTime = Math.max(handleEndTime.value - currentTime, 0) | ||
restTime.value = remainTime | ||
if (!remainTime) { | ||
counting.value = false | ||
pause() | ||
emit('end') | ||
emit('onEnd') | ||
} | ||
if (remainTime > 0) { | ||
tick() | ||
} | ||
} | ||
}) | ||
} | ||
} | ||
// 开始 | ||
const start = () => { | ||
if (!counting.value && !props.autoStart) { | ||
counting.value = true | ||
handleEndTime.value = Date.now() + Number(restTime.value) | ||
tick() | ||
emit('restart', restTime.value) | ||
emit('onRestart', restTime.value) | ||
} | ||
} | ||
// 暂定 | ||
const pause = () => { | ||
cancelAnimationFrame(timer.value!) | ||
counting.value = false | ||
emit('restart', restTime.value) | ||
emit('onRestart', restTime.value) | ||
} | ||
// 重置 | ||
const reset = () => { | ||
if (!props.autoStart) { | ||
pause() | ||
restTime.value = Number(props.time) | ||
} | ||
} | ||
defineExpose({ | ||
start, | ||
pause, | ||
reset | ||
}) | ||
onBeforeMount(() => { | ||
if (props.autoStart) { | ||
initTime() | ||
} else { | ||
restTime.value = Number(props.time) | ||
} | ||
}) | ||
watch( | ||
() => restTime.value, | ||
(value) => { | ||
const tranTime = formatRemainTime(value, props.format, 'custom') | ||
emit('update:modelValue', tranTime) | ||
emit('input', tranTime) | ||
} | ||
) | ||
watch( | ||
() => props.paused, | ||
(v, ov) => { | ||
if (!ov) { | ||
if (counting.value) { | ||
pause() | ||
} | ||
} else { | ||
if (!counting.value) { | ||
counting.value = true | ||
handleEndTime.value = Date.now() + Number(restTime.value) | ||
tick() | ||
} | ||
emit('restart', restTime.value) | ||
emit('onRestart', restTime.value) | ||
} | ||
} | ||
) | ||
watch( | ||
() => props.endTime, | ||
() => { | ||
initTime() | ||
} | ||
) | ||
watch( | ||
() => props.startTime, | ||
() => { | ||
initTime() | ||
} | ||
) | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.